/*
* ScrollView theme
*
*/

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

.dnb-drawer-list {
  --drawer-list-option-border-width: 0.0625rem;

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

  // ul element
  &__options {
    border: none;
    border-radius: var(--drawer-list-options-border-radius);

    &:focus {
      @include utilities.focusRing();
    }

    &--focusring {
      @include utilities.focusRing('mouse');
    }

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

  // li element inner
  &__option {
    position: relative;

    &.ignore-events {
      pointer-events: none;
    }

    // This is our border (separator line) instead of border-bottom: var(--drawer-list-option-border-width) solid
    &__inner::before {
      pointer-events: none;

      content: '';
      position: absolute;
      z-index: 2;
      top: auto;
      left: 0;
      right: 0;
      bottom: 0;

      // width: 100%; // 100% width would result in no margin right
      height: var(--drawer-list-option-border-width);
      background-color: var(--token-color-decorative-first-muted);
    }

    &__item.item-nr-1 {
      font-weight: var(--font-weight-medium);
    }

    @include utilities.hover() {
      background-color: var(--token-color-background-action-hover-subtle);

      .dnb-drawer-list__option__inner {
        color: var(--token-color-text-action-hover);
        background-color: var(
          --token-color-background-action-hover-subtle
        );
      }
    }

    @include utilities.active() {
      .dnb-drawer-list__option__inner {
        color: var(--token-color-text-neutral);
      }
    }

    // Focus ring around item. Only for keyboard usage
    &--focus &__inner {
      // we use the border/line and change it to a fake focus
      &::before {
        z-index: 3;

        top: var(--drawer-list-focus-border-width);
        left: var(--drawer-list-focus-border-width);
        right: var(--drawer-list-focus-border-width);
        bottom: var(--drawer-list-focus-border-width);

        height: auto;
        background-color: transparent;

        @include utilities.fakeBorder(
          var(--token-color-stroke-selected),
          var(--drawer-list-focus-border-width)
        );
      }
    }

    &--ignore &__inner {
      color: var(--token-color-text-neutral);
      background-color: var(--drawer-list-option-inner-background);
    }

    &--selected &__inner {
      color: var(--token-color-text-neutral-inverse);
      background-color: var(--token-color-background-selected);

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

      @include utilities.hover() {
        color: var(--token-color-text-neutral-inverse);
        background-color: var(--token-color-background-action-hover);

        .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-size: cover;

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

      // Remove separator line on selected items
      &::before {
        visibility: hidden;
      }
    }

    // TODO: Use CSS Container Queries when available
    @include utilities.allAbove(small) {
      &--selected &__suffix {
        z-index: 2; // over check icon
        background-color: inherit; // to "hide" the check icon
      }
      &:not(#{&}--selected) &__suffix#{&}__item:nth-of-type(n + 2) {
        color: var(--token-color-text-neutral);
      }
    }

    // show focus border when using keyboard
    html[data-whatinput='keyboard']
      &--selected#{&}--focus
      &__inner::before {
      visibility: visible;

      @include utilities.fakeBorder(
        var(--token-color-stroke-action-hover-inverse),
        var(--drawer-list-focus-border-width)
      );
    }

    // Focus ring around item. Only for keyboard usage
    &--focus:not(#{&}--selected) &__inner {
      color: var(--token-color-text-action-hover);
      background-color: var(--token-color-background-action-hover-subtle);
    }

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

  // make sure we have a spacing on the right side if we have a scrollbar
  &--scroll &__option:not(#{&}__option--focus) &__option__inner::before {
    left: 0.5rem;
    right: 0.5rem;
  }

  &--bottom &__option--focus.closest-to-top &__option__inner::before,
  &--top &__option--focus.closest-to-top &__option__inner::before {
    border-top-left-radius: var(--drawer-list-options-border-radius);
    border-top-right-radius: var(--drawer-list-options-border-radius);
  }

  &--bottom &__option--focus.closest-to-bottom &__option__inner::before,
  &--top &__option--focus.closest-to-bottom &__option__inner::before {
    border-bottom-left-radius: var(--drawer-list-options-border-radius);
    border-bottom-right-radius: var(--drawer-list-options-border-radius);
  }

  // error status
  &__status--error:not(#{&}--open) &__icon {
    color: var(--token-color-text-destructive);
  }

  &__arrow::before {
    box-shadow:
      var(--shadow-sharp),
      0 0 0 1px var(--token-color-stroke-neutral-subtle);
  }

  // group title arrow
  &--bottom:has(#{&}__group-title.closest-to-top) &__arrow,
  &--top:has(#{&}__group-title.closest-to-bottom) &__arrow {
    &::before {
      background-color: var(--drawer-list-group-title-bg);
    }
  }

  // hover and focus arrow
  &--bottom:has(#{&}__option.closest-to-top:hover) &__arrow::before,
  &--top:has(#{&}__option.closest-to-bottom:hover) &__arrow::before,
  &--bottom:has(#{&}__option.closest-to-top#{&}__option--focus)
    &__arrow::before,
  &--top:has(#{&}__option.closest-to-bottom#{&}__option--focus)
    &__arrow::before,
  &--bottom &__option.closest-to-top:hover ~ &__arrow::before,
  &--top &__option.closest-to-bottom:hover ~ &__arrow::before,
  &--bottom &__option.closest-to-top#{&}__option--focus ~ &__arrow::before,
  &--top
    &__option.closest-to-bottom#{&}__option--focus
    ~ &__arrow::before {
    background-color: var(--token-color-background-action-hover-subtle);
  }

  // selected arrow
  &--bottom:has(#{&}__option.closest-to-top#{&}__option--selected)
    &__arrow::before,
  &--top:has(#{&}__option.closest-to-bottom#{&}__option--selected)
    &__arrow::before,
  &--bottom
    &__option.closest-to-top#{&}__option--selected
    ~ &__arrow::before,
  &--top
    &__option.closest-to-bottom#{&}__option--selected
    ~ &__arrow::before {
    background-color: var(--token-color-background-selected);
  }

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