@import '../variables';
@import '../theme-colors';

@mixin form-inputs {
  height: auto !important;
  font-size: 100% !important;
  border-radius: 5px !important;
  padding: $default-input-box-padding !important;
  border-color: var(--default-border-color) !important;
}

@mixin select-inputs {
  background-size: 15px !important;
  background-position-x: 98% !important;
  background-position-y: 50% !important;
  background-repeat: no-repeat !important;
  color: var(--default-font-color) !important;
}

select {
  @include form-inputs;
  @include select-inputs;

  &.custom-select {
    color: var(--default-font-color) !important;
    background-color: var(--form-control-bg) !important;
    background-image: var(--select-input-icon) !important;
  }

  &:focus {
    box-shadow: none !important;
    border-color: $inputs-focus-color !important;
  }
}

// Select 2
.select2-container {
  width: 100% !important;

  &.select2-container--default {
    .select2-selection {
      @include form-inputs;
      @include select-inputs;
      display: flex;
      align-items: center;
      background-color: var(--form-control-bg) !important;
      background-image: var(--select-input-icon) !important;

      &:focus {
        outline: none;
      }

      .select2-selection__rendered {
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        line-height: initial;
        color: var(--default-font-color);

        .select2-selection__choice {
          display: flex;
          align-items: center;
          font-size: 12px;
          border-radius: 22px;
          padding: 0.3rem 0.45rem 0.3rem 0.45rem;
          margin: 0 0.3rem 0.3rem 0;
          background-color: var(--chips-bg);
          border: 1px solid var(--default-border-color);

          .select2-selection__choice__remove {
            padding: 0 0.5rem;
            position: initial;
            border: 0 !important;

            &:hover {
              background-color: transparent;
            }
          }
        }
      }

      .select2-selection__arrow {
        display: none;
      }
    }

    .select2-search--dropdown {
      padding: 0.8rem;

      .select2-search__field {
        padding: 0.6rem 1.2rem;
        border-radius: 20px;
        background-color: var(--search-box-bg);
        border-color: var(--default-border-color);

        &:focus {
          outline: none;
        }
      }
    }

    .select2-search--inline {
      .select2-search__field {
        margin: 0;
        padding: 0 !important;
        width: 100% !important;
        vertical-align: middle;
        font-family: $default-font-family;
      }
    }

    .select2-results__options {
      border-radius: $default-radius;
      box-shadow: var(--default-box-shadow);

      &::-webkit-scrollbar {
        width: $default-scrollbar-width;
        height: $default-scrollbar-width;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 5px;
      }

      &:hover {
        &::-webkit-scrollbar-thumb {
          background: var(--scrollbar-thumb-color);

          &:hover {
            background-color: var(--scrollbar-thumb-hover-color);
          }
        }
      }

      .select2-results__option {
        padding: 0.6rem 1.5rem;
      }

      .select2-results__option--selected {
        color: var(--default-font-color);
        background-color: var(--base-color);
      }

      .select2-results__option--highlighted {
        color: var(--default-font-color);

        &.select2-results__option--selectable {
          background-color: var(--base-color);
        }
      }
    }
  }
}

.select2-dropdown {
  border-radius: 4px;
  background-color: var(--default-card-bg);
  border-color: var(--default-border-color);
}

// SCSS for RTL Layout
[dir="rtl"] {
  select {
    background-position-x: 3% !important;
  }
}
