@import "../../variables-dark";

// Custom Forms

.custom-select {
  @extend .form-select;
}

.form-select {
  max-width: $input-max-width;
  cursor: pointer;
  background: $form-select-background #{"/* rtl:"}$form-select-background-rtl#{"*/"};;

  &[multiple] {
    padding: 0;

    option {
      padding: $form-select-multiple-padding-y $form-select-padding-x;

      &:checked {
        color: var(--template-text-light);
        background-color: var(--template-bg-dark) !important;
      }
    }
  }

  &.form-select-success,
  &.custom-select-success {
    color: var(--success);
    background-color: var(--success);
    border-color: var(--success);

    option {
      color: $form-select-color;
      background-color: var(--white-offset);
    }

    @if $enable-dark-mode {
      @include color-mode(dark) {
        option {
          background-color: var(--gray-800);
        }
      }
    }
  }

  &.form-select-danger,
  &.custom-select-danger {
    color: var(--danger);
    background-color: var(--danger);
    border-color: var(--danger);

    option {
      color: $form-select-color;
      background-color: var(--white-offset);
    }

    @if $enable-dark-mode {
      @include color-mode(dark) {
        option {
          background-color: var(--gray-800);
        }
      }
    }
  }

  &:disabled {
    cursor: default;
    background-color: var(--gray-200);
    background-image: none;
    border: 0;
    box-shadow: none;
  }

  @if $enable-dark-mode {
    @include color-mode(dark) {
      &:disabled {
        background-color: var(--gray-800);
      }
    }
  }

  optgroup,
  option {
    color: var(--template-text-dark);
    background-color: var(--body-bg);

    &:disabled {
      background-color: var(--template-bg-dark-5);
    }
  }

  @if $enable-dark-mode {
    @include color-mode(dark) {
      option {
        color: var(--template-text-light);

        &:disabled {
          background-color: var(--template-bg-dark-90);
        }
      }
    }
  }
}

@if $enable-dark-mode {
  @include color-mode(dark) {
    .form-select {
      background: $form-select-background-dark #{"/* rtl:"}$form-select-background-rtl-dark#{"*/"};
    }
  }
}