/*!******************************************************************************
 * Copyright (c) 2019, Code Atlantic LLC
 *
 * The bulk of this is to style jquery select2 to better
 * resemble the default WP dashboard inputs.
 ******************************************************************************/

$plugin-prefix: 'plugin' !default;
$custom-select2-selector: 'select2' !default;

.#{$plugin-prefix}-field-select2 {
  position: relative;

  .#{$custom-select2-selector}-container {
    box-sizing: border-box;

    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle;

    @import "../vendor/select2/single";
    @import "../vendor/select2/multiple";
  }

  @import "../vendor/select2/dropdown";

  .#{$custom-select2-selector}-close-mask {
    border: 0;
    margin: 0;
    padding: 0;
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    opacity: 0;
    z-index: 99;

    // styles required for IE to work
    background-color: #fff;
    filter: alpha(opacity=0);
  }

  .#{$custom-select2-selector}-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
  }

  @import "../vendor/select2/theme/default/layout";
  @import "../vendor/select2/theme/classic/layout";

  > .#{$custom-select2-selector}-container--below.#{$custom-select2-selector}-container--open + .#{$custom-select2-selector}-container--open,
  > .#{$custom-select2-selector}-container--below.#{$custom-select2-selector}-container--open + .#{$plugin-prefix}-desc + .#{$custom-select2-selector}-container--open {
    position: absolute !important;
  }

  // All Select2 Containers - Wraps Both Selectbox & Dropdown Elements
  .#{$custom-select2-selector}-container {

    // Selectbox
    .#{$custom-select2-selector}-selection {
      margin: 1px;
      font-size: 14px;
      border-radius: 0;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
      border-color: #ddd;
      transition: 0.05s border-color ease-in-out;

    }

    &.#{$custom-select2-selector}-container--focus {
      .#{$custom-select2-selector}-selection {
        outline: none;
        border-color: #5b9dd9;
        box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
      }
    }

    // Single Select
    .#{$custom-select2-selector}-selection--single {

      // Rendered Option
      .#{$custom-select2-selector}-selection__rendered {
        //padding-left: 0;
      }

    }

    // Multiple Select
    .#{$custom-select2-selector}-selection--multiple {
      overflow-y: auto;
      max-height: 150px;
      min-height: 28px;
      line-height: 16px;
      font-size: 12px;

      .#{$custom-select2-selector}-selection__clear {
        margin-right: 3px;
      }

      .#{$custom-select2-selector}-selection__rendered {

      }

      .#{$custom-select2-selector}-search--inline {
        margin: 0;
        // Search Field
        .#{$custom-select2-selector}-search__field {
          border-color: #ddd;
          padding: 3px 5px 0;
          min-width: 5em;
          width: 100% !important;
        }
      }

      .#{$custom-select2-selector}-selection__choice {
        margin-top: 4px;
        margin-bottom: 0;
      }

    }

    // Dropdown
    .#{$custom-select2-selector}-dropdown {
      margin: 0 1px;
      border-color: #ddd;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
      // Compensate for the margin applied to the Selectbox.
      max-width: calc(100% - 4px);
      position: relative;

      // Search Field
      .#{$custom-select2-selector}-search__field {
        border-color: #ddd;
        padding: 3px 5px;
        min-width: 5em;
      }

      // Results
      .#{$custom-select2-selector}-results {

        // Each result set. Can be nested.
        .#{$custom-select2-selector}-results__option {
          padding: 3px 6px;
          margin: 0;

          &[aria-selected=true] {
          }

        }
        .#{$custom-select2-selector}-results__option[role=group] {
          padding: 3px 0 0;

          .#{$custom-select2-selector}-results__group {
            padding: 0 6px;
          }
        }

        .#{$custom-select2-selector}-results__options--nested {
          padding: 3px 6px 0;
        }

        // Hover
        .#{$custom-select2-selector}-results__option--highlighted {
          background: #3e86d0;
        }

      }

    }

  }

  .#{$custom-select2-selector}-container + .#{$custom-select2-selector}-container--open {
    top: inherit !important;
  }

}