@include digitalmarketplace-exports("digitalmarketplace/component/option-select") {
  $dm-search-icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='%23636363' /%3E%3C/svg%3E";


  .dm-option-select {
    position: relative;
    margin-bottom: govuk-spacing(2);
    padding: 0 0 govuk-spacing(2);
    border-bottom: 1px solid $govuk-border-colour;

    @include govuk-media-query($from: desktop) {
      // Redefine scrollbars on desktop where these lists are scrollable
      // so they are always visible in option lists
      ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 7px;
      }

      ::-webkit-scrollbar-thumb {
        border-radius: 4px;

        // scss-lint:disable ColorVariable
        background-color: rgba(0, 0, 0, .5);
        -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.87);
      }
    }
  }

  .dm-option-select__title {
    @include govuk-font(19);
    margin: 0;
  }

  .dm-option-select__button {
    z-index: 1;
    padding: 0;
    border: 0;
    color: $govuk-link-colour;
    background: none;
    text-align: left;
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }

    &::-moz-focus-inner {
      border: 0;
    }

    &:focus {
      outline: none;

      outline: 3px solid transparent;
      color: $govuk-input-border-colour;
      background-color: $govuk-focus-colour;
      box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-input-border-colour;
      text-decoration: none;
    }

    &[disabled] {
      color: inherit;
      background-image: none;
    }

    // Extend the touch area of the button to span the heading
    &::after {
      content: "";
      position: absolute;
      z-index: 2;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }

  .dm-option-select__icon {
    display: none;
    position: absolute;
    top: 4px;
    left: 9px;
    width: 30px;
    height: 40px;
    fill: govuk-colour("black");
  }

  .dm-option-select__container {
    position: relative;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: govuk-colour("white");

    &:focus {
      outline: 0;
    }

    &--filter {
      max-height: 300px;
    }
  }

  .dm-option-select__container-inner {
    padding: govuk-spacing(1) 13px;

    .govuk-form-group {
      margin-bottom: govuk-spacing(1);
    }

    .govuk-checkboxes__label {
      @include govuk-font($size: 19);
    }
  }

  .js-enabled {
    .dm-option-select__heading {
      position: relative;
      margin: 0;
      padding: 10px 8px 5px 43px;
    }

    [aria-expanded="true"] ~ .dm-option-select__icon--up {
      display: block;
    }

    [aria-expanded="false"] ~ .dm-option-select__icon--down {
      display: block;
    }

    .dm-option-select__container {
      height: 200px;
    }

    .dm-option-select__container.dm-option-select__container--filter {
      height: 300px;
    }


    [data-closed-on-load="true"] .dm-option-select__container {
      display: none;
    }
  }

  .dm-option-select__selected-counter {
    @include govuk-font($size: 16);
    margin-top: 3px;
    color: $govuk-text-colour;
  }

  .dm-option-select.js-closed {
    .dm-option-select__container {
      display: none;
    }
  }

  .dm-option-select.js-opened {
    .dm-option-select__container {
      display: block;
    }
  }

  .dm-option-select__filter-input {
    padding-left: govuk-spacing(7);
    background-image: url($dm-search-icon);
    background-repeat: no-repeat;
    background-position: left govuk-spacing(-1) center;
    background-size: 40px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/*# sourceMappingURL=_index.scss.map */