@use 'sass:math';
@use 'sass:list';
@use 'vars' as psv;

@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-resizer-width});
    background: psv.$panel-background;
    transform: translate3d(100%, 0, 0);
    opacity: 0;
    transition-property: opacity, transform;
    transition-timing-function: ease-in-out;
    transition-duration: psv.$panel-animate-delay;
    cursor: default;
    margin-left: psv.$panel-resizer-width;

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

    &-close-button {
        display: none;
        position: absolute;
        top: -1px;
        right: 0;
        width: math.div(psv.$panel-close-button-size, 5) * 3;
        height: math.div(psv.$panel-close-button-size, 5) * 3;
        padding: math.div(psv.$panel-close-button-size, 5);
        background: transparent;
        color: psv.$panel-close-button-color;
        transition: background psv.$panel-close-button-animate-delay ease-in-out;
        cursor: pointer;

        svg {
            transition: transform psv.$panel-close-button-animate-delay ease-in-out;
        }

        &:hover {
            background: psv.$panel-close-button-background;

            svg {
                transform: scale(-1);
            }
        }
    }

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

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

        @if $panel-resizer-grip-width > 0 {
            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: #{psv.$panel-resizer-width - $panel-resizer-grip-width * 0.5 - 1px};
                margin-top: -#{psv.$panel-resizer-grip-height * 0.5};
                width: 1px;
                height: 1px;
                box-shadow: make-dot-shadow(
                    psv.$panel-resizer-grip-color,
                    $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: 0.2s;

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

    @container psv-container (max-width: #{psv.$panel-width}) {
        width: 100% !important;
        max-width: none;

        &-resizer {
            display: none !important;
        }
    }
}

.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 * 0.5;

        /* stylelint-disable-next-line no-descending-specificity */
        svg {
            width: psv.$panel-title-icon-size;
            height: psv.$panel-title-icon-size;
            margin-right: psv.$panel-title-margin * 0.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 0.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%;
            }

            /* stylelint-disable-next-line no-descending-specificity */
            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;
}