/*
* ScrollView theme
*
*/

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

.dnb-drawer-list {
  --drawer-list-height: 2.5rem;
  --drawer-list-options-border-radius: 0 0
    var(--drawer-list-options-border-radius)
    var(--drawer-list-options-border-radius);
  --drawer-list-options-border-radius-reversed: var(
      --drawer-list-options-border-radius
    )
    var(--drawer-list-options-border-radius) 0 0;
  --drawer-list-option-border-width: 0.125rem;
  --drawer-list-option-border-color: transparent;
  --drawer-list-option-inner-border-display: none;
  --drawer-list-option-inner-background: transparent;
  --drawer-list-sb-outside-border: var(--token-color-stroke-neutral);
  --drawer-list-sb-list-option-background: transparent;

  &__list {
    margin-top: calc(
      -1 * var(--drawer-list-option-border-width)
    ); // Switch border width to a negative number
    border-radius: var(--drawer-list-options-border-radius);

    &:focus-visible {
      outline: var(--token-color-stroke-action-focus) solid
        var(--drawer-list-option-border-width);
    }
  }

  &__option__inner {
    overflow: visible;
    padding: 1rem 0.75rem;
    margin: 0 var(--drawer-list-option-border-width);

    &::before {
      content: '';
      display: block;
      position: absolute;
      top: -1px;
      left: 0.5rem;
      width: calc(100% - 1rem);
      height: 1px;
      @include utilities.fakeBorder(
        var(--token-color-stroke-neutral-bold),
        0.125rem,
        inset
      );
    }
  }

  &__options {
    background-color: transparent;
    @include utilities.fakeBorder(
      var(--drawer-list-sb-outside-border),
      var(--drawer-list-option-border-width),
      inset
    );
    border-radius: var(--drawer-list-options-border-radius);
  }

  &__group-title {
    position: relative;
    z-index: -1;
  }

  &__option {
    box-shadow: inset 0 0 0 var(--drawer-list-option-border-width)
      var(--drawer-list-option-border-color);
    background: var(--drawer-list-sb-list-option-background);
    z-index: 0;

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

    @include utilities.hover() {
      --drawer-list-option-border-color: var(
        --token-color-stroke-action-hover
      );
      z-index: 1;

      .dnb-drawer-list__option__inner::before {
        display: var(--drawer-list-option-inner-border-display);
      }
    }

    @include utilities.active() {
      --drawer-list-option-border-color: var(
        --token-color-stroke-action-pressed
      );
      z-index: 1;

      .dnb-drawer-list__option__inner::before {
        display: var(--drawer-list-option-inner-border-display);
      }
    }

    &--selected {
      --drawer-list-sb-list-option-background: var(
        --token-color-background-selected
      );
      color: var(--token-color-text-neutral-inverse);
      border-right-color: var(
        --drawer-list-sb-outside-border
      ); // Compensate for transparent right border

      &.last-item {
        border-bottom-color: var(--drawer-list-sb-outside-border);
      }

      .dnb-drawer-list__option__inner::before {
        display: var(--drawer-list-option-inner-border-display);
      }

      // check icon
      .dnb-drawer-list__option__inner::after {
        content: '';

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

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

        width: 1rem;
        height: 1rem;

        background-size: cover;
        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuOTk5OTYgMTEuMDU3M0wxNC42NjY2IDIuMzkwNjdMMTUuNjA5MyAzLjMzMzM0TDUuOTk5OTYgMTIuOTQyN0wwLjM5MDYyNSA3LjMzMzM0TDEuMzMzMjkgNi4zOTA2N0w1Ljk5OTk2IDExLjA1NzNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
      }
    }

    @include utilities.allAbove(small) {
      &--selected &__suffix {
        z-index: 2; // over check icon
        background-color: var(
          --drawer-list-sb-list-option-background
        ); // to "hide" the check icon
      }
    }

    &.first-item &__inner::before {
      content: none;
    }

    &.last-item {
      border-radius: var(--drawer-list-options-border-radius);
    }

    &:focus-visible,
    &--focus {
      --drawer-list-option-border-color: var(
        --token-color-stroke-action-focus
      );
      --drawer-list-sb-list-option-background: var(
        --token-color-background-action-focus-subtle
      );
      color: var(--token-color-text-action-focus);
      font-weight: var(--sb-font-weight-medium);
      z-index: 1;

      /* stylelint-disable no-descending-specificity */
      .dnb-drawer-list__option__inner {
        --drawer-list-option-inner-background: transparent;
      }

      .dnb-drawer-list__option__inner::before {
        display: var(--drawer-list-option-inner-border-display);
      }

      .dnb-drawer-list__option__inner::after {
        // Selected check mark icon
        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuOTk5OTYgMTEuMDU3M0wxNC42NjY2IDIuMzkwNjdMMTUuNjA5MyAzLjMzMzM0TDUuOTk5OTYgMTIuOTQyN0wwLjM5MDYyNSA3LjMzMzM0TDEuMzMzMjkgNi4zOTA2N0w1Ljk5OTk2IDExLjA1NzNaIiBmaWxsPSIjMDA1Q0ZGIi8+Cjwvc3ZnPgo=');
      }
      /* stylelint-enable no-descending-specificity */
    }
  }

  &__arrow {
    display: none;
  }

  // When it opens upwards
  &--top {
    .dnb-drawer-list__list {
      border-radius: var(--drawer-list-options-border-radius-reversed);
      margin-top: 0;
      margin-bottom: calc(
        -1 * var(--drawer-list-option-border-width)
      ); // Switch border width to a negative number
    }

    .dnb-drawer-list__options {
      border-radius: var(--drawer-list-options-border-radius-reversed);
    }

    .dnb-drawer-list__option {
      &.last-item {
        border-radius: 0;
      }

      &.first-item {
        border-radius: var(--drawer-list-options-border-radius-reversed);
      }
    }

    .dnb-drawer-list__option--selected {
      &.first-item {
        border-top-color: var(--drawer-list-sb-outside-border);
      }
    }
  }
}