.select2-container--claro {
  @import "../../../../libraries/select2/src/scss/theme/default/_single.scss";
  @import "../../../../libraries/select2/src/scss/theme/default/_multiple.scss";
  @import "default";
}

.select2-container--claro {
  border-radius: var(--input-border-radius-size);

  /*
   * See form-element.
   */
  .select2-selection {
    border: var(--input-border-size) solid var(--input-border-color);
    border-radius: var(--input-border-radius-size);
  }

  .select2-selection--multiple {

    .select2-selection__rendered {
      display: block; /* reset select2 */
      padding: 0 0.5rem;
    }

    /*
     * See claro form-text .form-element.
     * 1. No left / right padding because of select2-selection__choice.
     */
    .select2-search--inline {
      box-sizing: border-box;
      color: var(--colorGinText);
      min-height: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height)); /* iOS. */
      padding: calc(0.75rem - 1px) 0; /* 1 */
      line-height: var(--input-line-height);

      .select2-search__field {
        margin-top: 0;
      }
    }

    /*
     * Claro chips design according to figma
     *
     * 1. Additional color see figma.
     * 2. transparent border for high contrast mode.
     * 3. ~24px, figma says 25px
     * 4. ~14px bold, see figma
     * 5. Compensate select2 css
     * 6. width detracted by transparent border
     */
    .select2-selection__choice {
      background-color: #e9ecf1; /* 1 */
      border: 1px solid transparent !important; /* 2 */
      border-radius: 1.5rem; /* 3 */
      font-size: var(--font-size-s); /* 0.889rem */ /* 4 */
      font-weight: 700; /* 4 */
      line-height: 1rem;
      margin-top: 0.5rem;
      margin-right: 0.5rem;
      padding: calc(0.5rem - 1px); /* 6 */

      [dir=rtl] & {
        margin: 5px 0 0 0.35rem;
      }

      /*
       * 1. Additional color see figma.
       */
      .select2-selection__choice__remove {
        float: right;
        border-radius: 50%;
        color: #e9ecf1; /* 1 */
        font-size: 0;
        margin-right: 0;
        margin-left: 0.35rem;
        width: 1rem;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28px' height='28px' viewBox='0 0 28 28'%3E%3Cpath stroke='%23D4D4D8' stroke-width='4' d='M19,9L9,19'/%3E%3Cpath stroke='%23D4D4D8' stroke-width='4 ' d='M19,19L9,9'/%3E%3C/svg%3E%0A") 50% 50% / 100% 100% no-repeat;
        background-color: #999aa3; /* 1 */

        &:hover {
          background-color: var(--color-text); /* #222330 */
          color: #e9ecf1; /* 2 */
        }
      }
    }
  }

  /*
   * 1. See claro form-text .form-element.
   */
  .select2-selection--single {
    min-height: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height)); /* iOS. */ /* 1 */
    padding: calc(0.75rem - 1px) calc(1rem - 1px); /* 1 */

    /*
     * 1. See claro form-text .form-element.
     * 2. Reset select2 styles.
     */
    .select2-selection__rendered {
      color: var(--input-fg-color); /* 1 */
      padding-left: 0;  /* 2" */
      padding-right: 12px; /* 2 */
      line-height: var(--input-line-height); /* 1 */
    }

    /*
     * 1. Vertically align arrow.
    */
    .select2-selection__arrow {
      min-height: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height)); /* iOS. */ /* 1 */
      width: 25px;

      b {
        border-color: var(--input-fg-color) transparent transparent transparent; /* #222330 */
      }
    }
  }

  &.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--input-fg-color) transparent; /* #222330 */
  }

  /*
   * Reset select2 border.
   */
  &.select2-container--focus .select2-selection--multiple {
    border: var(--input-border-size) solid var(--input--hover-border-color);
  }

  .select2-search__field:focus {
    box-shadow: none;
  }

  /*
   * 1. See claro .form-element.
   */
  .select2-search--dropdown .select2-search__field {
    min-height: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height)); /* iOS. */ /* 1 */
    padding: var(--input-padding-vertical) var(--input-padding-horizontal); /* 1 */
    border-color: var(--input--focus-border-color); /* #222330 */
    border-radius: var(--input-border-radius-size); /* 0.125rem */
  }

  .select2-search--dropdown .select2-search__field:hover,
  .select2-selection:hover {
    border-color: var(--input--hover-border-color);
    box-shadow: inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
  }

  .select2-search--dropdown .select2-search__field:focus,
  &.select2-container--focus {
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
    outline: 0;
  }
  /* .form-element:hoiver:focus */
  .select2-search--dropdown .select2-search__field:hover:focus {
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
  }

  /*
   * 1. See .form-element
   */
  .select2-results__option {
    box-sizing: border-box;
    min-height: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height)); /* iOS. */ /* 1 */
    padding: var(--input-padding-vertical) var(--input-padding-horizontal); /* 1 */

    &[aria-selected=true] {
      background-color: #e9ecf1; /* Additional color, see figma */
    }
  }
  .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-absolutezero); /* #003cc5  */
    color: var(--color-white);
  }
}
