// Select2 dropdowns are mounted on <body>; keep them above the modal (z-index 12).
// The design system forces .select2-container to 100% width; offset by Select2's left position that overflows the page.
body > .select2-container {
  z-index: 13;
  width: auto !important;
}

select.select2,
select.select2sm {
  display: none !important;
}

.select2-container {
  width: 100% !important;
}

.select2-results__option .select2-results__option--group {
  padding: 0;
  overflow: visible;
}

.select2-results__options .select2-results__options--nested {
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: visible;
}

.select2-selection--single {
  min-height: $btn-height;
  height: auto;
  overflow: hidden;
}

.select2-selection:hover,
.select2-selection--single:hover,
.select2-container--testio .select2-selection:hover,
.select2-container--testio .select2-selection--single:hover,
.select2-container--testio-sm .select2-selection:hover,
.select2-container--testio-sm .select2-selection--single:hover {
  background-color: $link-hover-color;
  border-color: $link-hover-color;
}

.select2-selection.select2-selection--single::before,
.select2-selection.select2-selection--multiple::before {
  content: "";
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 0;
  top: 0;
  width: $input-height;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: $border-width;
  border-left-style: solid;
  border-left-width: $border-width;
  border-top-left-radius: 0;
  border-top-right-radius: $border-width;
}

.select2-selection.select2-selection--single::after,
.select2-selection.select2-selection--multiple::after {
  content: "";
  position: absolute;
  display: inline-block;
  right: 14px;
  top: 50%;
  height: $icon;
  width: 12px;
  margin-top: -($spacing-xs);
  mask-image: url("@images/arrow-down.svg");
  mask-repeat: no-repeat;
  background-color: $white;
}

.select2-container--open .select2-selection.select2-selection--single::after,
.select2-container--open .select2-selection.select2-selection--multiple::after {
  mask-image: url("@images/arrow-up.svg");
}


.select2-selection__arrow {
  display: none;
}

.select2-container--testio,
.select2-container--testio-light,
.select2-container--testio-custom,
.select2-container--testio-light-custom,
.select2-container--testio-sm {

  .select2-selection,
  .select2-dropdown,
  .select2-search__field {
    border-radius: $border-radius;
    border-style: solid;
    border-width: $border-width;
    overflow: hidden;
  }

  .select2-search--dropdown {
    padding: $spacing-xs $spacing-sm;
  }

  .select2-search__field {
    @include box-shadow(0);
    height: $input-height-sm;
    outline: none;
    padding-left: $spacing-sm;
  }

  .select2-results__options {
    max-height: 200px;
    overflow-y: auto;
  }

  li {
    margin-bottom: 0;
  }

  // Dropdown open

  &.select2-container--open {

    .select2-selection {
      border-color: $link-hover-color;
    }

    &.select2-container--below .select2-selection {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom-color: $link-color;
      border-top-left-radius: $border-radius;
      border-top-right-radius: $border-radius;
    }

    &.select2-container--above .select2-selection {
      border-bottom-left-radius: $border-radius;
      border-bottom-right-radius: $border-radius;
      border-top-color: $link-color;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
  }
}

.select2-container--testio-light,
.select2-container--testio-light-custom {

  .select2-selection,
  .select2-dropdown,
  .select2-search__field {
    background-color: $input-bg;
    border-color: $input-border-color;
    overflow: hidden;
  }

  .select2-selection__arrow {
    display: none;
  }

  .select2-results__option--highlighted {
    background-color: $link-hover-color;
    color: $white;
  }

  &.select2-container--open {

    &.select2-container--below .select2-selection {
      border-bottom-color: $link-color;
    }

    .select2-dropdown--below {
      border-bottom: $border-width solid $input-border-color;
    }

    &.select2-container--above .select2-selection {
      border-top-color: $link-color;
    }

    .select2-dropdown--above {
      border-top: $border-width solid $input-border-color;
    }
  }
}

.select2-container--testio,
.select2-container--testio-custom,
.select2-container--testio-sm {

  .select2-selection,
  .select2-search__field {
    background-color: $primary;
    border-color: $primary;
    color: $white;
  }

  .select2-dropdown {
    background-color: $primary;
    border-color: $link-hover-color;
    color: $white;
  }

  .select2-search__field {
    background-color: $petrol-dark;
  }

  .select2-results__option--highlighted {
    background-color: $link-hover-color;
    color: $white;
  }

  &.select2-container--open {

    &.select2-container--below .select2-selection {
      border-bottom-color: $link-color;
    }

    &.select2-container--above .select2-selection {
      border-top-color: $link-color;
    }

    .select2-dropdown--below {
      border-top: $border-width solid $white;
    }

    .select2-dropdown--above {
      border-bottom: $border-width solid $white;
    }
  }
}

.select2-container--testio,
.select2-container--testio-light {

  .select2-selection {
    height: $input-height;
    line-height: $input-line-height;
    overflow: none;

    &.select2-selection--multiple {
      height: auto;
    }
  }

  .select2-results__option,
  .select2-selection--single .select2-selection__rendered {
    padding-top: $spacing-xs;
    padding-right: $spacing-lg;
    padding-bottom: $spacing-xs;
    padding-left: $spacing-sm;
  }

  .select2-selection--multiple .select2-selection__rendered,
  .select2-selection--multiple .select2-search,
  .select2-selection--multiple .select2-search__field {
    width: 100% !important;
  }
}

.select2-container--testio-sm {
  width: auto !important;

  .select2-selection--multiple .select2-selection__rendered,
  .select2-selection--multiple .select2-search,
  .select2-selection--multiple .select2-search__field {
    width: 100% !important;
  }
}

.select2-container--testio-custom,
.select2-container--testio-light-custom {

  .select2-selection {
    height: auto;
  }

  .select2-selection--single .select2-selection__rendered {
    padding: 0;
  }

  .select2-results__option {
    padding: 0;
  }
}

/*///// Multi select /////*/

.select2-selection.select2-selection--multiple {
  min-height: $btn-height;
  padding: $spacing-xs ($spacing-lg + $spacing-xxs) $spacing-xs $spacing-sm;
}

.select2-container .select2-search--inline .select2-search__field {
  margin: 0;
  padding: $spacing-xxs $spacing-xs;
}

.select2-search.select2-search--inline {
  position: relative;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}


// multi select items

.select2-container--testio li.select2-selection__choice {
  position: relative;
  display: inline-flex;
  flex-direction: row-reverse;
  flex-grow: 0;
  align-items: stretch;
  margin-right: $spacing-xs;
  margin-bottom: $spacing-xs;
  padding-left: $spacing-xxs;
  padding-right: 0;
  font-size: $font-size-sm;
  color: $black;
  background-color: $white;
  border-radius: $border-radius;
}

.select2-selection__choice__display {
  padding: $spacing-xxs;
}

.select2-selection__choice__remove {
  display: flex;
  justify-content: center;
  align-items: center;
  color: $primary;
  font-size: 0;
  border: none;
  border-top-right-radius: $border-radius;
  border-bottom-right-radius: $border-radius;
  background-color: transparent;
  &::after {
    content: "";
    display: inline-block;
    mask-image: url("@images/cross-thick.svg");
    width: 10px;
    height: 10px;
    background-color: $primary;
  }
  &:hover {
    background-color: $danger;
  }

  &:hover::after {
    background-color: $white;
  }
}

// Multi select with internal selected options

.select2-container--testio .select2-results__option--selected {
  &::before {
    content: "";
    display: inline-block;
    mask-image: url("@images/check-circle-filled.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 20px;
    height: 20px;
    margin-right: $icon-spacing;
    background-color: $white;
    vertical-align: middle;
  }
}

.select2-container--testio .select2-results__option--selected.select2-results__option--highlighted {
  background-color: $link-hover-color;
}

.select2-container--open .select2-dropdown.select2-dropdown--below {
  z-index: 10; 
}

// Multi select with external selected options

.multi-select-external .select2-selection.select2-selection--multiple {
  min-height: $btn-height;
  padding: 0;
  border: none;
}

.multi-select-external .select2-selection--multiple .select2-selection__choice {
  display: none !important;
}

.multi-select-external {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  .select2-container {
    width: 100% !important;
  }
}

.multi-select-external .select2-container .select2-search--inline .select2-search__field {
  min-height: $spacer;
  height: $spacer;
  margin: 0;
  padding: $spacing-xs $spacing-sm;
  border: none;
  border-radius: $border-radius;
  background-color: transparent;
  color: $white;

  &::placeholder {
    color: rgba($white, 0.6);
    font-style: italic;
  }
}

.multiselect-selected-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin-top: $spacing-xs;
  gap: $spacing-xxs;
}





/*///// Optgroups /////*/

.select2-results__group {
  padding: $spacing-xs;
}

.select2-results__option.select2-results__option--group {
  padding: 0;
}

.select2-results__options.select2-results__options--nested {
  overflow: visible;
}


/*///// Disabled /////*/

.select2-container--disabled .select2-selection:hover,
.select2-container--testio .select2-container--disabled .select2-selection:hover {
  background-color: transparent;
  border-color: $border-color;  
}

.select2-container--disabled .select2-selection::before,
.select2-container--testio .select2-container--disabled .select2-selection,
.select2-container--disabled.select2-selection--multiple::before {
  border-left-color: $border-color;
}

.select2-container--disabled .select2-selection {
  background-image: url("@images/pattern-striped-bright.png");
  background-repeat: repeat;
  background-color: transparent;
  border: $border-width solid $border-color;
  color: $disabled;
  cursor: not-allowed;
  &:hover{
    color: $disabled;
  }
  &::before {
    background-color: transparent;
  }
  &::after {
    background-color: $disabled;
  }
  & input::placeholder {
    color: $disabled;
  }
}

// temperorary hack added to correctly render dropdown on filters screen in bug list.
// After we implement the new filters design, we can remove this

.filter-options-form {
  .form-group label {
    display: block;
  }
  
  .select2-container {
    width: 180px !important;
  }
}

.multi-select-inputs {
  display: flex;
  
  .select2-container {
    margin-right: $spacing-xs;
    &:last-child{
      margin-right: 0;
    }
  }
}

.device-dropdown-option {
  display: flex;
  align-items: center;
  min-height: $spacing + $spacing-lg;
  padding: $spacing-xs;
  padding-right: $spacing-xs + $input-height;
}



// Select2 sm variant //

.select2-container--testio-sm {

  .select2-selection {
    height: $btn-sm-height;
    min-height: $btn-sm-height;
    padding-right: $spacer;
    line-height: $btn-sm-height;
    font-size: $font-size-sm;
  }

  .select2-results__option,
  .select2-selection--single .select2-selection__rendered {
    padding-top: 0.05rem;
    padding-right: $spacing-sm;
    padding-bottom: 0.05rem;
    padding-left: $spacing-sm;
    font-size: $font-size-sm;
    line-height: $btn-sm-height;
  }

  .select2-selection.select2-selection--single::before {
    width: $btn-sm-height;
    height: $btn-sm-height;
    border: 0;
    background-color: transparent;
  }

  .select2-selection.select2-selection--single::after,
  .select2-selection.select2-selection--multiple::after {
    right: $spacing-xxs;
    height: $icon-xs;
    width: $icon-xs;
    top: 50%;
    margin-top: calc($icon-xs / -2);
    background-color: $disabled;
  }
}