@use "../z-index";
@use "../../core";
@use "../../core/size";
@use "variables" as *;
@use "../../core/mixins/focus";

$ZINDEX: z-index.$MODAL_ZINDEX - 1 !default;

// parameters
$layout-navigation-scroll-width: 6px !default;
$layout-navigation-border-width: 4px !default;
$layout-navigation-inner-margin: 20px !default;
$layout-navigation-content-padding: 4px !default;
$layout-navigation-dot-diameter: 4px !default;
$layout-navigation-dot-spacing: 4px !default;

.layout-navigation {
    min-height: 100%;
    width: 100%;

    &__primary {
        flex: auto;

        > .container-fluid {
            width: initial;
            max-width: 1440px;
            padding: 1.5rem;
            margin-left: 0;
            margin-right: 0;
        }
    }

    &__navigation {
        background-color: $layout-navigation-color-background;
        display: flex;
        position: fixed;
        z-index: $ZINDEX;
        left: 0;
        bottom: 0;
    }

    &__navigation__border {
        width: #{$layout-navigation-border-width};
        background-color: $layout-navigation-resize-handle-color-background-default;
        cursor: w-resize;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        &__dot {
            background-color: $layout-navigation-resize-handle-dot-color-background;
            width: #{$layout-navigation-dot-diameter};
            height: #{$layout-navigation-dot-diameter};
            border-radius: 2px;
            margin-top: #{$layout-navigation-dot-spacing};
        }
    }

    &__navigation__border:hover {
        background-color: $layout-navigation-resize-handle-color-background-hover;
    }

    &__navigation__inner {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        margin-right: #{$layout-navigation-inner-margin - $layout-navigation-content-padding - $layout-navigation-border-width};
        overflow-wrap: break-word;
        padding: 1rem;

        &__title {
            display: flex;
            align-items: center;
            padding: #{$layout-navigation-content-padding};
        }

        &__title h3 {
            flex: auto;
            margin: 0;
            min-width: 40%;
        }

        &__title button {
            position: absolute;
            right: 1rem;
        }

        &__button {
            background-color: $layout-navigation-button-color-background-default;
            border-radius: var(--f-border-radius-medium);
            border: var(--f-border-width-medium) solid transparent;
            box-shadow: none;
            color: $layout-navigation-button-color-default;
            cursor: pointer;
            display: inline-flex;
            justify-content: center;
            outline-offset: size.$padding-025;
            padding: size.$padding-050;
            transition: background-color var(--f-animation-duration-medium) ease-out;

            &:focus-visible {
                background-color: $layout-navigation-button-color-background-focus;
            }

            @media (hover: hover) {
                &:hover {
                    background-color: $layout-navigation-button-color-background-hover;
                }
            }

            &:active {
                background-color: $layout-navigation-button-color-background-active;
            }

            &:focus-visible {
                @include focus.focus-indicator;
            }
        }

        &__content {
            flex-grow: 1;
            overflow-y: auto;
            padding: #{$layout-navigation-content-padding};

            &::-webkit-scrollbar {
                width: #{$layout-navigation-scroll-width};
            }

            &::-webkit-scrollbar-thumb {
                background: $layout-navigation-scrollbar-thumb-color-background;
                border: 1px solid $layout-navigation-scrollbar-thumb-color-background;
                box-sizing: border-box;
                border-radius: 33px;
            }
        }

        &--minimized {
            margin-left: -0.6rem;
            margin-right: -0.8rem;
            padding: 0;
        }
    }
}