@use "../z-index";
@use "variables" as *;

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

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

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

    &__primary {
        flex: auto;

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

    &__secondary {
        background-color: $layout-secondary-color-background;
        position: fixed;
        display: flex;
        right: 0;
        bottom: 0;
        z-index: $ZINDEX;

        @media (hover: hover) {
            .button--tertiary:hover {
                background-color: $layout-secondary-button-tertiary-color-background-hover;
            }
        }

        &__border {
            width: #{$layout-secondary-border-width};
            background-color: $layout-secondary-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-secondary-resize-handle-dot-color-background;
                width: #{$layout-secondary-dot-diameter};
                height: #{$layout-secondary-dot-diameter};
                border-radius: 2px;
                margin-top: #{$layout-secondary-dot-spacing};
            }
        }

        @media (hover: hover) {
            &__border:hover {
                background-color: $layout-secondary-resize-handle-color-background-hover;
            }
        }

        &__inner {
            position: relative;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            overflow-wrap: break-word;
            margin: #{$layout-secondary-inner-margin - $layout-secondary-content-padding};
            margin-left: #{$layout-secondary-inner-margin - $layout-secondary-content-padding - $layout-secondary-border-width};

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

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

            &__close.button {
                position: absolute;
                top: 0;
                right: 0;
                margin-bottom: 0;
            }

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

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

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

    @media (width <=1280px) {
        &__secondary {
            box-shadow:
                4px 0 2px rgb(0, 0, 0, 0.5),
                -4px 0 2px rgb(0, 0, 0, 0.5);
        }
    }
}