@use 'sass:map';

@use '../core/styles/common';

@use '../core/styles/common/tokens' as *;

@use './sidepanel-theme' as *;

$indent-offset: calc(-1 * var(--kbq-sidepanel-size-panel-lower-offset));

@mixin _sidepanel-container($selected-side) {
    $sides: top, right, bottom, left;
    $opposite-sides: (
        'top': 'bottom',
        'right': 'left',
        'left': 'right',
        'bottom': 'top'
    );

    .kbq-sidepanel-content {
        @each $side in $sides {
            @if (not (map.get($opposite-sides, $selected-side) == $side)) {
                margin-#{$side}: var(--kbq-sidepanel-size-panel-viewport-margin);
            }
        }
    }

    & {
        transform-origin: center #{map.get($opposite-sides, $selected-side)};
    }
}

.kbq-sidepanel-container {
    outline: none;
    display: flex;
    flex: 1;
    position: fixed;
    min-height: 0;

    /* stylelint-disable-next-line selector-class-pattern */
    .flex {
        min-height: 0;
    }

    &.kbq-sidepanel-container_left,
    &.kbq-sidepanel-container_right {
        height: 100%;
        top: 0;
        max-width: 100%;

        &.kbq-sidepanel_small {
            width: var(--kbq-sidepanel-size-small-width);
            max-width: var(--kbq-sidepanel-size-small-width);
        }

        &.kbq-sidepanel_medium {
            width: var(--kbq-sidepanel-size-medium-width);
            max-width: var(--kbq-sidepanel-size-medium-width);
        }

        &.kbq-sidepanel_large {
            width: var(--kbq-sidepanel-size-large-width);
        }

        .kbq-sidepanel-indent {
            width: var(--kbq-sidepanel-size-panel-lower-offset);
            height: 100%;
        }
    }

    &.kbq-sidepanel-container_top,
    &.kbq-sidepanel-container_bottom {
        flex-direction: column;
        height: 33%;
        min-height: 400px;
        width: calc(100% - 2 * var(--kbq-sidepanel-size-panel-viewport-margin));
        left: 0;

        .kbq-sidepanel-indent {
            height: var(--kbq-sidepanel-size-panel-lower-offset);
            width: 100%;
        }
    }
}

.kbq-sidepanel-container_right {
    right: 0;
    transform: translateX(100%);

    .kbq-sidepanel-wrapper {
        flex-direction: row;
    }

    @include _sidepanel-container(right);
}

.kbq-sidepanel-container_left {
    left: 0;
    transform: translateX(-100%);

    .kbq-sidepanel-wrapper {
        flex-direction: row-reverse;
    }

    @include _sidepanel-container(left);
}

.kbq-sidepanel-container_top {
    top: 0;
    transform: translateY(-100%);

    .kbq-sidepanel-wrapper {
        flex-direction: column-reverse;
    }

    @include _sidepanel-container(top);
}

.kbq-sidepanel-container_bottom {
    bottom: 0;
    transform: translateY(100%);

    .kbq-sidepanel-wrapper {
        flex-direction: column;
    }

    @include _sidepanel-container(bottom);
}

.kbq-sidepanel-wrapper {
    display: flex;
    flex: 1;
    min-height: 0;
    width: 100%;
    position: relative;
}

.kbq-sidepanel-indent {
    display: flex;
    flex: 0 0 auto;
    cursor: pointer;

    position: absolute;

    .kbq-sidepanel-container_top & {
        bottom: $indent-offset;
    }

    .kbq-sidepanel-container_right & {
        left: $indent-offset;
    }

    .kbq-sidepanel-container_bottom & {
        top: $indent-offset;
    }

    .kbq-sidepanel-container_left & {
        right: $indent-offset;
    }
}

.kbq-sidepanel-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
    border-radius: var(--kbq-size-border-radius);
}

.kbq-sidepanel-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    flex-flow: row nowrap;
    flex: 0 0 auto;
    transition: box-shadow 100ms ease-in-out;

    padding: var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-right)
        var(--kbq-sidepanel-size-header-padding-vertical) var(--kbq-sidepanel-size-header-padding-left);

    .kbq-sidepanel-close {
        margin-left: var(--kbq-sidepanel-size-close-button-margin-left);
    }

    &.kbq-sidepanel-header_truncate-text {
        align-items: center;

        .kbq-sidepanel-title {
            @include common.kbq-truncate-line();
        }
    }

    &.kbq-sidepanel-header_bottom-overflown {
        box-shadow: var(--kbq-shadow-overflow-normal-bottom);
    }
}

.kbq-sidepanel-title {
    flex: 1;
}

.kbq-sidepanel-body {
    overflow-y: auto;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;

    padding: var(--kbq-sidepanel-size-content-padding-top) var(--kbq-sidepanel-size-content-padding-horizontal)
        var(--kbq-sidepanel-size-content-padding-bottom);
}

.kbq-sidepanel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-flow: row nowrap;
    flex: 0 0 auto;
    transition: box-shadow 100ms ease-in-out;

    padding: var(--kbq-sidepanel-size-footer-padding-top) var(--kbq-sidepanel-size-footer-padding-horizontal)
        var(--kbq-sidepanel-size-footer-padding-bottom);

    .kbq-sidepanel-actions {
        display: flex;
        align-items: center;
        flex-direction: row;
        flex: 1;

        &[align='left'] {
            justify-content: start;
        }

        &[align='right'] {
            justify-content: flex-end;
        }

        gap: var(--kbq-sidepanel-size-footer-content-gap-horizontal);
    }

    &.kbq-sidepanel-footer_top-overflown {
        box-shadow: var(--kbq-shadow-overflow-normal-top);
    }
}

@include kbq-sidepanel-theme();
@include kbq-sidepanel-typography();