/*
* Dropdown component
*
*/

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

.dnb-dropdown {
  --dropdown-width: 16rem;
  --dropdown-height: 2rem;
  --dropdown-height--small: 1.5rem;
  --dropdown-height--medium: 2.5rem;
  --dropdown-height--large: 3rem;
  --dropdown-error-border-width: 0.125rem;
  --dropdown-text-padding: 0.5rem;
  --dropdown-button-padding: 0 1rem;
  --dropdown-border-radius: var(--token-radius-sm);
  --dropdown-error-border-inset: ;

  display: inline-flex;
  align-items: center;

  font-size: var(--font-size-small);
  line-height: var(--dropdown-height);

  &__inner {
    display: inline-flex;
    flex-direction: column;

    margin: 0;
    padding: 0;

    width: auto;

    color: inherit;
  }

  &__shell {
    position: relative;

    width: var(--dropdown-width);
    height: var(--dropdown-height);

    margin: 0;
    padding: 0;

    color: inherit;
  }

  &__row {
    display: inline-flex;
  }

  &__icon {
    position: relative;
    order: 2;

    display: inline-flex;
    justify-content: center;

    pointer-events: none;
  }

  // button
  &__trigger {
    position: relative;
    z-index: 1;
    user-select: none; // Safari / Touch fix

    width: 100%;

    --button-color-bg--disabled: var(
      --token-color-background-neutral-subtle
    );
    --button-color-border--disabled: var(
      --token-color-stroke-action-disabled
    );
    --button-color-text--disabled: var(
      --token-color-text-neutral-alternative
    );

    &.dnb-button__status--error {
      --button-color-border--default: var(--token-color-stroke-error);
    }

    &.dnb-button {
      padding: var(--dropdown-button-padding);
      border-radius: var(--dropdown-border-radius);
    }
  }

  &--is-popup &__trigger.dnb-button {
    padding: 0;
    border-radius: 50%;
  }

  &__text {
    order: 1;
    position: relative;
    z-index: 4;

    display: inline-block; // make ellipsis actually work
    width: 100%;

    overflow: hidden;

    color: inherit;
    text-align: left;
    text-overflow: ellipsis;
    line-height: inherit;
    font-size: var(--font-size-basis);

    &__inner {
      display: inherit; // fixes number-format, if used inside the button
      overflow: hidden;
      white-space: nowrap;
      text-overflow: inherit;
    }
  }

  // adjust the form-status to the inner border for 2px
  > .dnb-form-status {
    transform: translateY(-0.4375rem);
  }

  &--icon-position-left &__text {
    order: 2;
    padding-right: 0;
    padding-left: var(--dropdown-text-padding);
  }

  &--icon-position-left &__icon {
    order: 1;
  }

  &--icon-position-right &__text {
    padding-right: var(--dropdown-text-padding);
  }

  &--independent-width &__shell {
    width: auto;
  }

  &--icon-position-left
    .dnb-button--tertiary
    ~ .dnb-drawer-list__root--portal {
    left: -0.5rem;
  }

  &--icon-position-right
    .dnb-button--tertiary
    ~ .dnb-drawer-list__root--portal {
    left: 0.5rem;
  }

  .dnb-button--tertiary .dnb-button__text {
    margin: 0 0.5rem;

    &::after {
      bottom: 0; // ensure that we see the underline, else it is behind the overflow hidden
    }
  }

  &--icon-position-left .dnb-button--tertiary &__text,
  &--icon-position-right .dnb-button--tertiary &__text {
    padding: 0;
  }

  .dnb-button--tertiary {
    padding: 0;
  }

  &--open &__trigger:not([disabled]).dnb-button--secondary {
    --button-border-inset--default: var(--dropdown-error-border-inset);
    --border-width: var(--dropdown-error-border-width);

    &:not(.dnb-button__status--error) {
      --button-color-border--default: var(
        --token-color-stroke-action-pressed
      );
    }
  }

  &__status--error .dnb-button--tertiary {
    @include button-mixins.buttonFocusRing('always');

    &::before {
      --border-color: var(--token-color-stroke-error);
      --border-width: 0.0625rem;
    }
    &:disabled::before {
      --border-color: var(--token-color-stroke-action-disabled);
    }
  }
  .dnb-button--tertiary[disabled] {
    --button-tertiary-focus-left: 0;
    --button-tertiary-focus-right: 0;
  }
  &__status--error .dnb-button--tertiary:not([disabled]) {
    &:hover::before {
      --border-width: var(--dropdown-error-border-width);
    }
  }
  .dnb-button--secondary {
    --button-color-bg--hover: var(--token-color-background-neutral);
  }

  // Button only menu
  &--default#{&}--is-popup &__shell,
  &--is-popup &__trigger {
    padding: 0;
    width: var(--dropdown-height);
    height: var(--dropdown-height);
  }

  &--is-popup &__icon {
    width: 100%;
  }
  &--is-popup#{&}--scroll &__options {
    min-height: 1rem;
  }

  &--is-popup .dnb-drawer-list__root {
    width: var(--dropdown-width); // only a fallback
  }

  // size--small
  &--small#{&}--is-popup &__shell,
  &--small#{&}--is-popup &__trigger {
    width: var(--dropdown-height--small);
  }

  // size--medium
  &--medium#{&}--is-popup &__shell,
  &--medium#{&}--is-popup &__trigger {
    width: var(--dropdown-height--medium);
  }

  // size--large
  &--large#{&}--is-popup &__shell,
  &--large#{&}--is-popup &__trigger {
    width: var(--dropdown-height--large);
  }

  // Size--small
  &--small &__shell,
  &--small &__trigger {
    height: var(--dropdown-height--small);
  }

  &--small,
  &--small &__trigger.dnb-button {
    line-height: var(--dropdown-height--small);
  }

  // Size--medium
  &--medium &__shell,
  &--medium &__trigger {
    height: var(--dropdown-height--medium);
  }

  &--medium,
  &--medium &__trigger.dnb-button {
    line-height: var(--dropdown-height--medium);
  }

  // Size--large
  &--large &__shell,
  &--large &__trigger {
    height: var(--dropdown-height--large);
  }

  &--large,
  &--large &__trigger.dnb-button {
    line-height: var(--dropdown-height--large);
  }

  &--large &__trigger.dnb-button &__text {
    line-height: var(--line-height-basis);
  }

  > .dnb-form-label {
    margin-right: 1rem;
    line-height: var(--line-height-basis);
  }

  @include utilities.formLabelWrap();

  // make full width
  &--stretch {
    display: flex;
    flex-grow: 1;
  }

  &--stretch & {
    &__inner {
      flex-grow: 1;
    }

    &__row,
    &__inner,
    &__shell {
      width: 100%;
    }
  }

  &--stretch .dnb-form-label + &__inner {
    width: auto;
  }
  &--vertical#{&}--stretch &__inner {
    width: 100%;
  }

  label + &[class*='__form-status'] {
    vertical-align: top;

    .dnb-dropdown__shell {
      top: -0.375rem;
    }
  }

  &__inner > .dnb-form-status {
    order: 2;
    margin-top: 0.5rem;
  }

  &--vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  &:not(&--vertical)[class*='__status'] {
    align-items: flex-start;

    > .dnb-form-label {
      // vertical align the current font
      margin-top: 0.25rem;
    }
  }

  .dnb-responsive-component & {
    @include utilities.allBelow(small) {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      margin-bottom: 0.5rem;

      > .dnb-form-label {
        margin-bottom: 0.5rem;
      }

      &__helper {
        display: none;
      }
    }
  }
}

.dnb-drawer-list--arrow-position {
  &-left {
    .dnb-dropdown__list--tertiary .dnb-drawer-list__arrow {
      margin-left: 0.5rem;
    }
  }

  &-right {
    .dnb-dropdown__list--tertiary .dnb-drawer-list__arrow {
      margin-right: 0.5rem;
    }
  }
}