/*
* DrawerList component
*
*/

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

@mixin openDrawerList($type: 'slide') {
  z-index: var(--z-index-dropdown); // 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;
    }
    &--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;
    }
    &--no-animation {
      animation-duration: 1ms !important;
    }
  }
}
@mixin drawerListClosed() {
  display: none;
}

.dnb-drawer-list {
  --drawer-list-distance: 0.5rem;
  --drawer-list-padding: 0.5rem;
  --drawer-list-list-border-radius: var(--token-radius-md);
  --drawer-list-option-border-radius: var(--token-radius-sm);
  --drawer-list-option-border-width: 0.25rem;
  --drawer-list-option-gap: 0.5rem;
  --drawer-list-option-divider: 0.0625rem;

  // Template
  --drawer-list-padding-horizontal--large: 1.25rem;
  --drawer-list-height--small: 1.5rem;
  --drawer-list-height--default: 2rem;
  --drawer-list-height--medium: 2.5rem;
  --drawer-list-height--large: 3rem;

  // Other
  --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);
  // 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);

    // 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 {
    --drawer-list-list-border-width: 0.0625rem;

    position: absolute;
    z-index: 3;
    top: var(--drawer-list-top, auto);
    bottom: var(--drawer-list-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;

    @include utilities.sharpDropShadow();
    border-radius: var(--drawer-list-list-border-radius);
  }

  // ul element
  &__options {
    --drawer-list-option-extra-border--default: 0 0 transparent;
    // text
    --drawer-list-option-color-text--default: var(
      --token-color-text-neutral
    );
    --drawer-list-option-color-text--disabled: var(
      --token-color-text-action-disabled
    );

    // background
    --drawer-list-option-color-bg--default: var(
      --token-color-background-neutral
    );
    --drawer-list-option-color-bg--hover: var(
      --token-color-background-neutral-subtle
    );
    --drawer-list-option-color-bg--active: var(
      --token-color-background-neutral-base
    );
    --drawer-list-option-color-bg--focus: var(
      --token-color-background-neutral-subtle
    );
    --drawer-list-option-color-bg--disabled: var(
      --token-color-background-neutral
    );

    // border
    --drawer-list-option-color-border--default: transparent;
    --drawer-list-option-color-border--focus: var(
      --token-color-stroke-action-focus
    );

    display: flex;
    flex-direction: column;

    width: 100%;
    margin: 0;
    max-height: 90vh;
    padding: var(--drawer-list-padding);

    list-style: none;

    border: none;
    border-radius: var(--drawer-list-list-border-radius);

    &:focus-visible {
      outline: none;
    }

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      box-shadow: 0 0 0 var(--drawer-list-list-border-width)
        var(--token-color-stroke-neutral-subtle);
    }
  }

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

  &--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 {
      position: relative;
      z-index: 0;

      display: block;
      padding: 0.5rem calc(var(--drawer-list-padding) + 0.5rem);
      margin: var(--drawer-list-padding)
        calc(var(--drawer-list-padding) * -1);
      color: var(--drawer-list-group-title-color);
      background-color: var(--drawer-list-group-title-bg);
      font-weight: var(--font-weight-medium);
    }
    &.first-of-type &-title {
      margin-top: calc(var(--drawer-list-padding) * -1);
    }
  }
  // li element
  &__option {
    position: relative;
    z-index: 0;

    cursor: pointer;

    margin: 0 0 var(--drawer-list-option-gap);
    scroll-margin-top: calc(var(--drawer-list-padding));
    scroll-margin-bottom: calc(var(--drawer-list-padding));
    padding: 0;
    color: var(
      --drawer-list-option-color-text,
      var(--drawer-list-option-color-text--default)
    );

    outline: none;

    background-color: var(
      --drawer-list-option-color-bg,
      var(--drawer-list-option-color-bg--default)
    );
    border-radius: var(--drawer-list-option-border-radius);
    @include utilities.fakeBorder(
      $color: var(
          --drawer-list-option-color-border,
          var(--drawer-list-option-color-border--default)
        ),
      $width: var(--drawer-list-option-border-width),
      $extendShadow: var(
          --drawer-list-option-extra-border,
          var(--drawer-list-option-extra-border--default)
        )
    );

    &__inner {
      position: relative;

      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: 0.5rem 1rem;

      color: inherit;

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

      &::before {
        pointer-events: none;

        content: '';
        position: absolute;
        z-index: 2;
        top: auto;
        left: 1rem;
        right: 1rem;
        bottom: calc(
          (
              var(--drawer-list-option-gap) +
                var(--drawer-list-option-divider)
            ) /
            2 * -1
        );

        // width: 100%; // 100% width would result in no margin right
        height: var(--drawer-list-option-divider);
        background-color: var(--token-color-stroke-neutral-subtle);
      }
    }

    &__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;
      }
      &.item-nr-1 {
        font-weight: var(--font-weight-medium);
      }
    }

    @include utilities.hover() {
      --drawer-list-option-color-text: var(
        --drawer-list-option-color-text--hover
      );
      --drawer-list-option-color-bg: var(
        --drawer-list-option-color-bg--hover
      );
    }

    @include utilities.active() {
      --drawer-list-option-color-text: var(
        --drawer-list-option-color-text--active
      );
      --drawer-list-option-color-bg: var(
        --drawer-list-option-color-bg--active
      );
    }

    // Focus ring around item. Only for keyboard usage
    &--focus {
      --drawer-list-option-color-text: var(
        --drawer-list-option-color-text--focus
      );
      --drawer-list-option-color-bg: var(
        --drawer-list-option-color-bg--focus
      );

      .dnb-drawer-list__option__inner {
        &::before {
          background-color: transparent;
        }
      }
    }

    html[data-whatinput='keyboard'] &--focus {
      --drawer-list-option-color-border: var(
        --drawer-list-option-color-border--focus
      );
      --drawer-list-option-extra-border: var(
        --drawer-list-option-extra-border--focus
      );
    }

    &__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,
    &.ignore-events {
      cursor: default;
      pointer-events: none;
    }

    &--selected {
      --drawer-list-option-extra-border--focus: inset 0 0 0 0.125rem
        var(--token-color-component-button-icon-neutral);
      // text
      --drawer-list-option-color-text--default: var(
        --token-color-text-neutral-inverse
      );
      --drawer-list-option-color-text--hover: var(
        --token-color-text-neutral-inverse
      );
      --drawer-list-option-color-text--active: var(
        --token-color-text-neutral-inverse
      );
      --drawer-list-option-color-text--focus: var(
        --token-color-text-neutral-inverse
      );

      // bg
      --drawer-list-option-color-bg--default: var(
        --token-color-background-selected
      );
      --drawer-list-option-color-bg--hover: var(
        --token-color-background-action-hover
      );
      --drawer-list-option-color-bg--active: var(
        --token-color-background-action-pressed
      );
      --drawer-list-option-color-bg--focus: var(
        --token-color-background-action-hover
      );

      .dnb-drawer-list__option__inner {
        .dnb-drawer-list__option__inner {
          color: inherit;
          background-color: inherit;
        }

        // check icon
        &::after {
          content: '';

          grid-column: 2;
          grid-row: 1 / -1;

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

          width: 1rem;
          height: 1rem;

          background-color: currentcolor;

          // This SVG gfx is generated by using /assets/elements/drawer-list/check-gfx.svg
          mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSI+ICA8cGF0aCAgICBmaWxsPSIjMDAwIiAgICBkPSJNMyA4LjhhLjc1Ljc1IDAgMSAwLTEuMjIuODZMMyA4Ljc5em0xLjg0IDMuOWwuNjMtLjQxdi0uMDFoLS4wMWwtLjYyLjQyem0xLjcxLjA1bC0uNTktLjQ2di4wMWwuNTkuNDV6bTguNDMtOS40NWEuNzUuNzUgMCAwIDAtMS4xOC0uOTNsMS4xOC45M3pNMS43OCA5LjY2bDIuNDUgMy40OCAxLjIzLS44N0wzIDguOGwtMS4yMy44N3ptMi40NCAzLjQ2Yy4zMi40OC44Ni43OCAxLjQ0LjhsLjA1LTEuNWEuMy4zIDAgMCAxLS4yNC0uMTNsLTEuMjUuODN6bTEuNDQuOGExLjggMS44IDAgMCAwIDEuNDktLjcxbC0xLjItLjlhLjMuMyAwIDAgMS0uMjQuMWwtLjA1IDEuNXptMS40OC0uN2w3Ljg0LTkuOTItMS4xOC0uOTMtNy44NCA5LjkyIDEuMTguOTN6Ii8+PC9zdmc+');
          mask-size: cover;
        }
      }
    }

    // TODO: Use CSS Container Queries when available
    @include utilities.allAbove(small) {
      &--selected:has(#{&}__suffix) &__inner::after {
        content: none;
      }

      &--selected &__suffix {
        z-index: 0; // over check icon
        align-self: center;
      }
    }

    // remove last bottom border
    &.last-of-type:not(#{&}--focus) &__inner::before {
      content: none;
    }

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

    &.last-of-type {
      margin-bottom: 0;
    }
  }

  &--top {
    --drawer-list-bottom: var(
      --drawer-list-height,
      var(--drawer-list-height--default)
    );
  }

  &--bottom &__list {
    margin-top: var(--drawer-list-distance);
  }
  &--top &__list {
    margin-bottom: var(--drawer-list-distance);
  }

  &__portal &--top {
    --drawer-list-bottom: 0;
  }

  &__portal &--bottom {
    --drawer-list-top: var(
      --drawer-list-height,
      var(--drawer-list-height--default)
    );
  }

  &--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();
  }

  &--no-divider {
    --drawer-list-option-gap: 0.25rem;
  }

  &--no-divider &__option__inner::before {
    content: none;
  }

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

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

  // size--large
  &--large {
    --drawer-list-height: var(--drawer-list-height--large);
    --drawer-list-padding-horizontal: var(
      --drawer-list-padding-horizontal--large
    );
  }
  &--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;
  }

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