/*
* DrawerList component
*
*/

@use '../../../style/core/utilities.scss' as utilities;

@mixin openDrawerList($type: 'slide') {
  z-index: 100; // make sure we are over e.g. switch
  display: flex;
  flex-direction: column;

  @if $type == 'scale' {
    animation: drawer-list-scale-in 200ms ease-out 1 forwards;
  } @else if $type == 'up' {
    animation: drawer-list-slide-bottom-up 200ms ease-out 1 forwards;
  } @else {
    &:not(#{&}--no-animation) {
      animation: drawer-list-slide-top-down 200ms ease-out 1 forwards;
    }
    html[data-visual-test] &,
    &--no-animation {
      animation-duration: 1ms !important;
    }
  }
}
@mixin closeDrawerList($type: 'slide') {
  @if $type == 'scale' {
    animation: drawer-list-scale-out 150ms ease-out 1 forwards;
  } @else if $type == 'up' {
    animation: drawer-list-slide-bottom-down 200ms ease-out 1 forwards;
  } @else {
    &:not(#{&}--no-animation) {
      animation: drawer-list-slide-top-up 150ms ease-out 1 forwards;
    }
    html[data-visual-test] &,
    &--no-animation {
      animation-duration: 1ms !important;
    }
  }
}
@mixin drawerListClosed() {
  display: none;
}

.dnb-drawer-list {
  --drawer-list-height: 2rem;
  --drawer-list-padding-horizontal: 1rem;
  --drawer-list-options-border-radius: var(--token-radius-sm);
  --drawer-list-focus-border-width: 0.125rem;
  --drawer-list-height--small: 1.5rem;
  --drawer-list-height--medium: 2.5rem;
  --drawer-list-height--large: 3rem;
  --drawer-list-option-inner-background: var(
    --token-color-background-neutral
  );
  --drawer-list-list-background: var(--token-color-background-neutral);
  --drawer-list-list-line-height: var(--line-height-basis);
  // Disabled option
  --drawer-list-option-disabled-background: var(
    --token-color-background-neutral
  );
  --drawer-list-option-disabled-color: var(
    --token-color-text-action-disabled
  );
  // Group
  --drawer-list-group-title-color: var(--token-color-text-neutral);
  --drawer-list-group-title-bg: var(
    --token-color-background-neutral-alternative
  );

  display: block; // has to be block element so we can se the content
  position: relative;

  width: inherit;
  min-width: inherit;

  // reset font for correct sizing
  font-size: var(--font-size-small);

  &__portal {
    --drawer-list-width: 16rem;
  }

  &__portal__style {
    position: absolute;
    transition:
      top 300ms var(--easing-default),
      left 300ms var(--easing-default),
      width 300ms var(--easing-default);

    html[data-visual-test] & {
      transition: none !important;
    }

    // higher than modal --modal-z-index:
    z-index: calc(var(--modal-z-index, 3200) + 300);

    &--fixed {
      position: fixed;
    }
  }

  &__root {
    width: inherit;
    min-width: inherit;

    // this is our relative starting point on absolute positioning
    &--portal {
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  &__content {
    width: 100%;
    padding: 0;
  }

  &__list {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;

    width: inherit;
    min-width: inherit;

    margin: 0;
    padding: 0;

    font-size: var(--font-size-basis);
    line-height: var(--drawer-list-list-line-height);
    background-color: var(--drawer-list-list-background);

    transform: translateY(0);
    transition:
      transform 200ms,
      opacity 160ms ease-out;
  }

  // ul element
  &__options {
    @at-root .dnb-spacing & li.dnb-drawer-list__option {
      margin: 0;
    }

    display: flex;
    flex-direction: column;

    width: 100%;
    margin: 0;
    max-height: 90vh;
    padding: 0;

    list-style: none;
  }

  &--scroll &__options {
    min-height: 2rem;
    max-height: 70vh;
    transition: max-height 300ms var(--easing-default);

    @include utilities.scrollY(auto);

    @include utilities.reducedMotion() {
      transition-duration: 0.01ms;
    }
  }
  html[data-visual-test] &--scroll &__options,
  &--scroll#{&}--no-animation &__options {
    transition: none !important;
  }
  &--open &__options {
    scroll-behavior: smooth;

    @media (prefers-reduced-motion: reduce) {
      scroll-behavior: auto;
    }
  }
  &--no-scroll-animation &__options {
    scroll-behavior: auto;
  }
  &__group {
    padding: 0;
    margin: 0;
    list-style: none;

    &-title {
      display: block;
      padding: 0.5rem 1rem;
      color: var(--drawer-list-group-title-color);
      background-color: var(--drawer-list-group-title-bg);
      font-weight: var(--font-weight-medium);
    }
  }
  // li element
  &__option {
    position: relative;

    cursor: pointer;

    margin: 0;
    padding: 0;
    color: var(--token-color-text-neutral);

    outline: none;

    background-color: var(--drawer-list-list-background);

    &__inner {
      position: relative;
      z-index: 1; // only to go over &__arrow

      display: grid;

      // Use two columns
      grid-template-columns: 1fr auto;

      // Use a high number in order to be able to vertically center the check icon (among others) and suffix with "grid-row: 1 / -1;"
      grid-template-rows: repeat(10, min-content);

      outline: none;

      margin: 0;
      padding: 1rem;

      color: inherit;
      background-color: var(--drawer-list-option-inner-background);

      // So e.g. an anchor gets aligned to left
      > * {
        align-self: self-start;
      }
    }

    &__item {
      display: block;
      text-overflow: ellipsis;

      // Place all items in the first column, but underneath
      grid-column: 1;

      &--horizontal {
        display: flex;
      }

      > .dnb-icon {
        vertical-align: initial;
      }

      .dnb-anchor {
        display: inline-block;
        margin-right: 0.5rem;
        word-break: break-word;

        font-size: inherit;
      }
    }

    &__suffix {
      // TODO: Use CSS Container Queries when available
      @include utilities.allAbove(small) {
        grid-column: 2;
        grid-row: 1 / -1;

        justify-self: end;
        align-self: center;
      }
    }

    &--ignore {
      cursor: default;
      pointer-events: none;
    }

    &[disabled] {
      --drawer-list-option-inner-background: var(
        --drawer-list-option-disabled-background
      );
      color: var(--drawer-list-option-disabled-color);
      cursor: not-allowed;
    }
  }

  // arrow
  &__arrow {
    position: absolute;
    top: calc(
      var(--drawer-list-focus-border-width) - var(--drawer-list-height) / 2
    );
    left: auto;
    right: 0;

    pointer-events: none;

    margin: 0 var(--drawer-list-padding-horizontal);

    width: calc(var(--drawer-list-height) / 2);
    height: calc(var(--drawer-list-height) / 2);

    z-index: -1;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;

      width: calc(var(--drawer-list-height) / 2);
      height: calc(var(--drawer-list-height) / 2);
      transform: translateY(60%) rotate(45deg);

      background-color: var(--drawer-list-list-background);
    }
  }
  &--arrow-position-left &__arrow {
    left: 0;
    right: auto;
  }
  &--top &__arrow {
    top: auto;
    bottom: calc(
      var(--drawer-list-focus-border-width) - var(--drawer-list-height) /
        2 - 2px
    );
    transform: rotate(180deg);
    &::before {
      transform: translateY(65%) rotate(45deg);
    }
  }

  &--is-popup#{&}--right {
    position: absolute;
    left: auto;
    right: 0;
  }

  // size--default button left aligned
  &--is-popup#{&}--left &__list {
    left: -0.5rem;
  }

  // size--default button right aligned
  &--is-popup#{&}--right &__list {
    right: -0.5rem;
  }

  &--open &__list {
    @include openDrawerList();
  }

  &--hidden &__list {
    @include drawerListClosed();
  }

  // size--default
  &--bottom &__list {
    top: 0;
    bottom: auto;
  }
  &--top &__list {
    top: auto;
    bottom: var(--drawer-list-height);
  }
  &__portal &--bottom &__list {
    top: var(--drawer-list-height);
    bottom: auto;
  }

  // size--small
  &__portal &--small &__list {
    top: var(--drawer-list-height--small);
  }
  &--small#{&}--top &__list {
    bottom: var(--drawer-list-height--small);
  }
  &--small#{&}--is-popup#{&}--left &__list {
    left: -0.75rem;
  }
  &--small#{&}--is-popup#{&}--right &__list {
    right: -0.75rem;
  }

  // size--medium
  &__portal &--medium &__list {
    top: var(--drawer-list-height--medium);
  }
  &--medium#{&}--top &__list {
    bottom: var(--drawer-list-height--medium);
  }
  &--medium#{&}--is-popup#{&}--left &__list {
    left: -0.25rem;
  }
  &--medium#{&}--is-popup#{&}--right &__list {
    right: -0.25rem;
  }

  // size--large
  &__portal &--large &__list {
    top: var(--drawer-list-height--large);
  }
  &--large#{&}--top &__list {
    bottom: var(--drawer-list-height--large);
  }
  &--large &__arrow {
    margin: 0 1.25rem;
  }
  &--large#{&}--is-popup#{&}--left &__list {
    left: -0.25rem;
  }
  &--large#{&}--is-popup#{&}--right &__list {
    right: -0.25rem;
  }

  /* stylelint-disable-next-line  */
  &--is-popup#{&}--right &__list {
    left: auto;
  }

  .dnb-drawer-list__root > &--right {
    position: absolute;
    right: 0;
    left: auto;
  }
  &__portal &--right {
    right: 100%;
  }

  // fix top in portal mode in one style declaration
  &__portal &--top &__list {
    top: auto;
    bottom: 0;
  }

  &:not(.dnb-drawer-list--open) &__list {
    @include closeDrawerList();
  }
}

@keyframes drawer-list-scale-in {
  from {
    opacity: 0;
    transform: scale(0.8) translateX(calc(1px - var(--drawer-list-width)));
  }
  to {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}
@keyframes drawer-list-scale-out {
  from {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
  to {
    opacity: 0;
    transform: scale(0.8) translateX(calc(1px - var(--drawer-list-width)));
  }
}

@keyframes drawer-list-slide-top-down {
  from {
    opacity: 0;
    transform: translateY(calc(1px - var(--drawer-list-height)));
    pointer-events: none;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

@keyframes drawer-list-slide-top-up {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(calc(1px - var(--drawer-list-height)));
  }
}

@keyframes drawer-list-slide-bottom-down {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(calc(1px + var(--drawer-list-height)));
  }
}

@keyframes drawer-list-slide-bottom-up {
  from {
    opacity: 0;
    transform: translateY(calc(1px + var(--drawer-list-height)));
    pointer-events: none;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}