@use 'sass:list';
@import 'vars';

@function make-dot-shadow($color, $w, $h) {
  $val: 1px 0 $color;
  $x: 3;
  $y: 0;

  @while $y < $h {
    @if $x > $w {
      $x: 1;
      $y: $y + 2;
    } @else {
      $val: #{$val}, #{$x}px #{$y}px #{$color};
      $x: $x + 2;
    }
  }

  @return $val;
}

.psv-panel {
  position: absolute;
  z-index: $psv-panel-zindex;
  right: 0;
  height: 100%;
  width: $psv-panel-width;
  max-width: calc(100% - #{$psv-panel-close-button-width});
  background: $psv-panel-background;
  transform: translate3d(100%, 0, 0);
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: ease-in-out;
  transition-duration: .1s;
  cursor: default;
  margin-left: $psv-panel-resizer-width;

  .psv--has-navbar & {
    height: calc(100% - #{$psv-navbar-height});
  }

  &-close-button {
    display: none;
    position: absolute;
    top: 0;
    left: -$psv-panel-close-button-width;
    width: $psv-panel-close-button-width;
    height: $psv-panel-close-button-width;
    background: $psv-panel-close-button-background;

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 4px;
      width: $psv-panel-close-button-width - 9px;
      height: 1px;
      background-color: $psv-panel-close-button-color;
      transition: .2s ease-in-out;
      transition-property: width, left, transform;
    }

    &::before {
      transform: rotate(45deg);
    }

    &::after {
      transform: rotate(-45deg);
    }

    &:hover {
      &::before,
      &::after {
        left: 0;
        width: $psv-panel-close-button-width - 1px;
      }

      &::before {
        transform: rotate(135deg);
      }

      &::after {
        transform: rotate(45deg);
      }
    }
  }

  &-resizer {
    display: none;
    position: absolute;
    top: 0;
    left: -$psv-panel-resizer-width;
    width: $psv-panel-resizer-width;
    height: 100%;
    background-color: $psv-panel-resizer-background;
    cursor: col-resize;

    $psv-panel-resizer-grip-width: $psv-panel-resizer-width - 4px;

    @if $psv-panel-resizer-grip-width > 0 {
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: ($psv-panel-resizer-width - $psv-panel-resizer-grip-width) * .5 - 1px;
        margin-top: (-$psv-panel-resizer-grip-height * .5);
        width: 1px;
        height: 1px;
        box-shadow: make-dot-shadow($psv-panel-resizer-grip-color, $psv-panel-resizer-grip-width, $psv-panel-resizer-grip-height);
        background: transparent;
      }
    }
  }

  &-content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color: $psv-panel-text-color;
    font: $psv-panel-font;
    overflow: auto;

    &:not(&--no-margin) {
      padding: $psv-panel-padding;
    }

    &--no-interaction {
      user-select: none;
      pointer-events: none;
    }
  }

  &--open {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition-duration: .2s;

    .psv-panel-close-button,
    .psv-panel-resizer {
      display: block;
    }
  }

  @media screen and (max-width: #{$psv-panel-width}) {
    width: 100%;
    max-width: none;

    &-resizer {
      display: none;
    }

    &-close-button {
      left: 0;
    }
  }
}

.psv-panel-menu {
  height: 100%;
  display: flex;
  flex-direction: column;

  &-title {
    flex: none;
    display: flex;
    align-items: center;
    font: $psv-panel-title-font;
    margin: $psv-panel-title-margin $psv-panel-title-margin * .5;

    svg {
      width: $psv-panel-title-icon-size;
      height: $psv-panel-title-icon-size;
      margin-right: $psv-panel-title-margin * .5;
    }
  }

  &-list {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  &-item {
    min-height: $psv-panel-menu-item-height;
    padding: $psv-panel-menu-item-padding;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: background .1s ease-in-out;

    &--active {
      outline: $psv-panel-menu-item-active-outline solid currentcolor;
      outline-offset: -$psv-panel-menu-item-active-outline;
    }

    &-icon {
      flex: none;
      height: $psv-panel-menu-item-height;
      width: $psv-panel-menu-item-height;
      margin-right: #{list.nth($psv-panel-menu-item-padding, 1)};

      img {
        max-width: 100%;
        max-height: 100%;
      }

      svg {
        width: 100%;
        height: 100%;
      }
    }

    &:focus-visible {
      outline: $psv-element-focus-outline;
      outline-offset: -#{list.nth($psv-element-focus-outline, 1)};
    }
  }

  &--stripped &-item {
    &:hover {
      background: $psv-panel-menu-hover-background;
    }

    &:nth-child(odd),
    &:nth-child(odd)::before {
      background: $psv-panel-menu-odd-background;
    }

    &:nth-child(even),
    &:nth-child(even)::before {
      background: $psv-panel-menu-even-background;
    }
  }
}

.psv-container:not(.psv--is-touch) .psv-panel-menu-item:hover {
  background: $psv-panel-menu-hover-background;
}