/**
 * @file
 * Select2 element styles.
 */

.select2-dropdown {
  border: var(--input-bw) solid var(--c-primary) !important;
  border-radius: var(--input-br) !important;
  overflow: hidden;
}

.select2-container--default.select2-container--default {
  .select2-selection--single {
    min-height: 49px;
    background-color: var(--input-bg);
    border: none;
    border-radius: 0px;

    .select2-selection__rendered {
      color: var(--_s2-single_c, var(--c-primary-dark));
      border: var(--input-bw) solid var(--_s2-single_bc, var(--input-bc));
      border-radius: var(--input-br);
      line-height: 28px;
      padding-inline: var(--input-px) calc(var(--input-px) * 2 + 20px);
      padding-block: 8px;

      &:hover {
        --_s2-single_bc: var(--_s2-single_bc-h, var(--input-bc_h));
      }

      &:has(.select2-selection__clear) {
        --_s2-single_bc: var(--input-bc_filled);

        padding-inline-end: var(--input-px);
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: space-between;

        .select2-selection__clear {
          background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 15L15 5' stroke='%23001968' stroke-width='1.25' stroke-linecap='square'/%3E%3Cpath d='M5 5L15 15' stroke='%23001968' stroke-width='1.25' stroke-linecap='square'/%3E%3C/svg%3E%0A");
          background-repeat: no-repeat;
          background-position: center;
          background-size: 20px;
          width: 20px;
          height: 20px;
          overflow: hidden;
          text-indent: -100vw;
        }

        & + .select2-selection__arrow {
          display: none;
        }
      }
    }

    .select2-selection__placeholder {
      color: var(--_s2-single_c, var(--c-primary-dark));
    }

    .select2-selection__arrow {
      height: 20px;
      width: 20px;
      position: absolute;
      top: 50%;
      right: var(--input-px);
      transform: translateY(-50%) rotate(var(--_s2-single_ratate, 180deg));
      transform-origin: center;
      transition: transform var(--t-t) linear;
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5557 13.3333L10.0001 7.7777L4.44455 13.3333' stroke='%23001968' stroke-width='1.25' stroke-linecap='square'/%3E%3C/svg%3E%0A");

      b {
        display: none;
      }
    }
  }

  .select2-search--dropdown {
    display: none;
  }

  .select2-results__option {
    color: var(--c-gray-600);
    padding: 11px var(--input-px);

    &:not(:first-child) {
      border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    &.select2-results__option--highlighted {
      background-color: transparent;
    }

    &[aria-selected="true"] {
      background-color: var(--c-light-blue);
      color: var(--c-primary);
    }
  }

  &.select2-container--open {
    --_s2-single_ratate: 0deg;
    --_s2-single_bc: var(--input-bc_f);
    --_s2-single_bc-h: var(--_s2-single_bc);

    &:has(.select2-selection__clear) .select2-selection__rendered {
      --_s2-single_bc: var(--input-bc_f);
    }
  }

  span {
    &[title="Select"],
    &[title="- Select -"],
    &[title="- None -"],
    &.select2-selection__placeholder {
      --_s2-single_c: var(--body-c);
    }
  }
}