/*
* Dropdown theme
*
*/

@import '../../../../style/core/utilities.scss';
@import '../../../button/style/themes/button-mixins.scss';

.dnb-dropdown {
  --dropdown-border-radius: 0.5rem;
  --dropdown-height: 2.5rem;
  --dropdown-error-border-width: 0.125rem;
  --dropdown-button-padding: 0 0.75rem 0 0.5rem;
  --dropdown-foreground-color-primary: var(--sb-color-gray-dark-2);
  --dropdown-foreground-color-error: var(--sb-color-red);
  --dropdown-background-color-disabled: var(--sb-color-gray-light);
  --dropdown-background-color-error-active: var(--sb-color-white);

  &__icon {
    color: var(--sb-color-text);
  }

  // button
  &__trigger:not(.dnb-button--tertiary) {
    @include fakeBorder(var(--dropdown-foreground-color-primary));
    color: var(--sb-color-gray-dark-3);
    line-height: var(--dropdown-height);

    @include hover() {
      @include fakeBorder(var(--sb-color-violet), 2px, inset);
      color: var(--sb-color-gray-dark-3);
      background-color: var(--sb-color-white);

      .dnb-dropdown__icon {
        color: var(--sb-color-violet);
      }
    }

    @include buttonFocus(
      var(--sb-color-blue-dark),
      var(--sb-color-blue-light-3)
    ) {
      .dnb-dropdown__icon {
        color: var(--sb-color-blue-dark);
      }
    }
  }

  &__trigger.dnb-button--active {
    @include fakeBorder(
      var(--dropdown-foreground-color-primary),
      0.125rem,
      inset
    );
    border-radius: var(--dropdown-border-radius)
      var(--dropdown-border-radius) 0 0;
  }

  &__trigger[disabled] {
    color: var(--sb-color-gray-dark-2);
    background-color: var(--sb-color-gray-light);
    @include fakeBorder(var(--dropdown-foreground-color-primary));

    .dnb-dropdown__icon {
      color: inherit;
    }
  }

  // error status
  &__status--error:not(#{&}--opened) &__trigger {
    @include hover() {
      @include fakeBorder(
        var(--dropdown-foreground-color-error),
        var(--dropdown-error-border-width),
        inset
      );
    }
  }

  // When it opens upwards
  &--top {
    .dnb-dropdown__trigger.dnb-button--active {
      border-radius: 0 0 var(--dropdown-border-radius)
        var(--dropdown-border-radius);
    }
  }
}