/*
* Dropdown component
*
*/

@import '../../../style/core/utilities.scss';

.dnb-dropdown {
  --dropdown-width: 16rem;
  --dropdown-height: 2rem;
  --dropdown-height--small: 1.5rem;
  --dropdown-height--medium: 2.5rem;
  --dropdown-height--large: 3rem;
  --dropdown-padding-horizontal: 1rem;
  --dropdown-focus-border-width: 0.125rem;
  --dropdown-error-border-width: 0.125rem;
  --dropdown-text-padding: 0.5rem;
  --dropdown-button-padding: 0 1rem;
  --dropdown-border-radius: 0.25rem;
  --dropdown-foreground-color-primary: var(--color-black-55);
  --dropdown-foreground-color-error: var(--color-fire-red);
  --dropdown-background-color-disabled: var(--color-black-3);
  --dropdown-background-color-error-active: var(--color-fire-red-8);

  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%;

    &.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;
    }
  }

  &__status--error:not(#{&}--opened) &__trigger {
    @include fakeBorder(var(--dropdown-foreground-color-error));

    @include hover() {
      color: var(--dropdown-foreground-color-error);

      @include fakeBorder(
        var(--dropdown-foreground-color-error),
        var(--dropdown-error-border-width)
      );

      & .dnb-dropdown__icon .dnb-icon {
        color: var(--dropdown-foreground-color-error);
      }
    }

    @include active() {
      color: var(--dropdown-foreground-color-error);
      background-color: var(--dropdown-background-color-error-active);
    }
  }
  &__status--error:not(#{&}--opened) &__trigger,
  &__status--error:not(#{&}--opened) &__icon {
    color: var(--dropdown-foreground-color-error);
  }

  // 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;
  }

  @media screen and (max-width: 40em) {
    &--action-menu &__trigger.dnb-button {
      padding-left: 0.5rem;
      padding-right: 0.5rem;

      border-radius: 50%;
    }
  }

  @include allAbove(small) {
    &--action-menu &__shell &__text {
      padding: 0 0.5rem;
    }
  }

  @media screen and (max-width: 40em) {
    &--action-menu &__shell &__text {
      width: 0;
      padding: 0;
    }
  }

  &--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--active {
    box-shadow: none;
  }

  .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;
  }

  .dnb-button--tertiary:focus::before {
    left: 0 !important;
    right: 0 !important;
  }

  // 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 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%;
  }

  .dnb-form-row--horizontal &--stretch {
    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 & {
    @media screen and (max-width: 40em) {
      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--triangle-position {
  // Cant access --dropdown-padding-horizontal, as the drawer list is outside of the dropdown scope
  &-left {
    .dnb-dropdown__list--tertiary .dnb-drawer-list__triangle {
      // --dropdown-padding-horizontal divided by two
      margin-left: 0.5rem;
    }
  }

  &-right {
    .dnb-dropdown__list--tertiary .dnb-drawer-list__triangle {
      // --dropdown-padding-horizontal divided by two
      margin-right: 0.5rem;
    }
  }
}