/*
* ScrollView theme
*
*/

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

.dnb-drawer-list {
  --drawer-list-height: 2.5rem;
  --drawer-list-options-border-radius: 0 0 0.5rem 0.5rem;
  --drawer-list-options-border-radius-reversed: 0.5rem 0.5rem 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-list-background: var(--sb-color-white);
  --drawer-list-list-option-background: transparent;
  // Disabled option
  --drawer-list-option-disabled-background: var(--sb-color-gray-light);
  --drawer-list-option-disabled-color: var(--sb-color-gray-dark);

  &__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(--sb-color-blue-dark) 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 fakeBorder(var(--sb-color-gray-dark), 0.125rem, inset);
    }
  }

  &__options {
    @include fakeBorder(
      var(--sb-color-gray-dark-2),
      var(--drawer-list-option-border-width),
      inset
    );
    border-radius: var(--drawer-list-options-border-radius);
  }

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

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

    @include hover() {
      --drawer-list-option-border-color: var(--sb-color-violet);
      z-index: 1;

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

    @include active() {
      --drawer-list-option-border-color: var(--sb-color-violet);
      z-index: 1;

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

    &--selected {
      --drawer-list-list-option-background: var(--sb-color-violet);
      color: var(--sb-color-white);
      border-right-color: var(
        --sb-color-gray-dark-2
      ); // Compensate for transparent right border

      &.last-of-type {
        border-bottom-color: var(--sb-color-gray-dark-2);
      }

      .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 allAbove(small) {
      &--selected &__suffix {
        z-index: 2; // over check icon
        background-color: var(
          --drawer-list-list-option-background
        ); // to "hide" the check icon
      }
    }

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

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

    &:focus-visible,
    &--focus {
      --drawer-list-option-border-color: var(--sb-color-blue-dark);
      --drawer-list-list-option-background: var(--sb-color-blue-light-3);
      color: var(--sb-color-blue-dark);
      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 */
    }
  }

  &__triangle {
    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-of-type {
        border-radius: 0;
      }

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

    .dnb-drawer-list__option--selected {
      &.first-of-type {
        border-top-color: var(--sb-color-gray-dark-2);
      }
    }
  }
}