@use '../../styles/variables';
@use 'sass:map';

$directions: (('left', 'right'), ('right', 'left'), ('top', 'bottom'), ('bottom', 'top'));

.thy-slide-backdrop {
    background: none;
}

.thy-slide-overlay-pane {
    position: fixed !important;
    display: block;
    opacity: 1;
    white-space: nowrap; // in order to not wrap when opening
    &.thy-slide-right {
        right: 0;
    }

    @each $direction, $reverse in $directions {
        &.thy-slide-#{$direction} {
            #{$direction}: 0;
            .thy-slide-container {
                border-#{$reverse}: 1px solid variables.$slide-border-color;
            }
        }
    }
}

.thy-slide-container {
    display: block;
    width: 100%;
    height: 100%;
    background-color: variables.$slide-bg;
    overflow-y: auto;
    position: absolute;

    &.thy-slide-over {
        box-shadow: variables.$slide-box-shadow;
    }
    &.thy-slide-side {
        border: solid 1px variables.$slide-border-color;
    }
    &.thy-slide-push {
        border: solid 1px variables.$slide-border-color;
    }
}

.thy-slide-lg {
    height: 100%;
}

.thy-slide {
    width: variables.$slide-width;
}

.thy-slide-side-drawer-container {
    transition-duration: 200ms;
    transition-property: transform, margin;
}
.thy-slide-push-drawer-container {
    transition-duration: 200ms;
    transition-property: transform translate;
}

.thy-slide-layout {
    display: flex;
    flex: auto;
    flex-direction: column;
    height: 100%;
    background: variables.$bg-default;

    .thy-slide-header {
        display: flex;
        flex-direction: row;
        padding: 0 variables.$slide-header-padding;
        height: variables.$slide-header-height;
        border-bottom: solid 1px variables.$slide-divider;
        background-color: transparent;
        flex: 0 0 auto;
        align-items: center;

        .thy-slide-header-title {
            color: variables.$gray-800;
            font-size: variables.$slide-header-title-font-size;
            line-height: 1.25rem;
            font-weight: normal;
            margin-bottom: 0;
        }

        .thy-slide-header-main {
            flex: 1;
            padding: variables.$slide-header-main-padding;
        }
    }

    .thy-slide-body {
        flex: auto;
        overflow-y: auto;
        padding: variables.$slide-body-content-padding;
    }

    .thy-slide-footer {
        flex: 0 0 auto;
        border-top: solid 1px variables.$slide-divider;
        padding: variables.$slide-footer-padding;
        height: variables.$slide-footer-height;
    }

    .thy-slide-body-section {
        display: block;
        padding-top: variables.$slide-body-section-padding;

        &.thy-slide-body-section-divider:not(:last-child) {
            border-bottom: 1px solid variables.$slide-divider;
        }
    }
}
