@use '../../../../../styles/base/mixin' as mixins;
@use '../../../../../styles/base/variables' as vars;

$aside: (
    host: (
        width: 33.75rem,
        box-shadow: 0 0 1rem 0 rgba(#000, 0.1),
        background-color: var(--clr-white-100),
    ),
    header: (
        padding: 2rem,
    ),
    header-mobile: (
        padding: 1rem,
    ),
    header-back-button: (
        margin-right: 1rem,
    ),
    header-title: (
        font-size: 1.5rem,
        line-height: 1.1,
        font-weight: 600,
    ),
    header-description: (
        font-size: 1rem,
        margin-bottom: 0.25rem,
        color: var(--clr-black-60),
    ),
    header-addition: (
        font-size: 1rem,
        margin-top: 0.25rem,
        color: var(--clr-black-60),
    ),
    header-actions: (
        margin-left: 1rem,
    ),
    header-action-button: (
        margin-left: 0.75rem,
    ),
    content: (
        padding: 0 2rem,
    ),
    content-mobile: (
        padding: 0 1rem,
    ),
    footer: (
        padding: 2rem,
        margin-left-betwen-buttons: 1rem,
    ),
    footer-mobile: (
        padding: 1rem,
    ),
    error-box: (
        height: 2rem,
        padding: 0.5rem,
        margin: 2rem 0 2rem 0,
        border: 1px solid var(--clr-red-60),
        border-radius: 0.375rem,
    ),
    error-box-title: (
        font-size: 1rem,
        font-color: var(--clr-red-60),
    ),
    error-box-button: (
        font-size: 1rem,
        font-color: var(--clr-black-100),
    ),
    tab-indicator: (
        width: 6rem,
    ),
    tab-badge: (
        color: var(--mdc-filled-button-container-color),
    ),
    tab-badge-incorrect: (
        color: var(--clr-red-100),
    ),
);

:root {
    @each $element, $elements in $aside {
        @each $style-token, $value in $elements {
            #{mixins.generateCssVar('aside', #{$element}, #{$style-token})}: #{$value};
        }
    }
}

.cdk-overlay-container,
.cdk-overlay-pane {
    z-index: 9999;
}

// TAB GROUP
.mat-mdc-tab-group {
    width: 100%;
}

// BADGE
.icon-badge {
    position: absolute !important;
}

.title-badge {
    margin-left: 0.25rem;
    top: -0.5rem;
}

.icon-badge,
.title-badge {
    .mat-badge-content {
        background-color: var(--rt-aside-tab-badge-color);
    }
}

.icon-badge.--incorrect,
.title-badge.--incorrect {
    .mat-badge-content {
        background-color: var(--rt-aside-tab-badge-incorrect-color);
    }
}

// ASIDE
.c-aside {
    position: relative;
    height: 100vh;
    max-height: 100vh;
    width: var(--rt-aside-host-width);

    box-shadow: var(--rt-aside-host-box-shadow);
    background-color: var(--rt-aside-host-background-color);

    // TAB GROUP
    .mdc-tab-indicator__content.mdc-tab-indicator__content--underline {
        width: var(--rt-aside-tab-indicator-width);
    }

    @include mixins.media-breakpoint-down(vars.$device-xs) {
        width: 100vw;
    }
} // c-aside

// ASIDE HEADER
.c-aside-header {
    padding: var(--rt-aside-header-padding);

    .back-button {
        margin-right: var(--rt-aside-header-back-button-margin-right);
    }

    .c-aside-title {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;

        &__descr {
            margin-bottom: var(--rt-aside-header-description-margin-bottom);
            font-size: var(--rt-aside-header-description-font-size);
            color: var(--rt-aside-header-description-color);
        }

        &__txt {
            font-size: var(--rt-aside-header-title-font-size);
            line-height: var(--rt-aside-header-title-line-height);
            font-weight: var(--rt-aside-header-title-font-weight);
        }

        &__addition {
            margin-top: var(--rt-aside-header-addition-margin-top);
            font-size: var(--rt-aside-header-addition-font-size);
            color: var(--rt-aside-header-addition-color);
        }

        &__descr,
        &__txt,
        &__addition {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .c-aside-actions {
        margin-left: var(--rt-aside-header-actions-margin-left);

        &__action {
            margin-left: var(--rt-aside-header-action-button-margin-left);
        }
    }

    @include mixins.media-breakpoint-down(vars.$device-xs) {
        padding: var(--rt-aside-header-mobile-padding);
    }
} // c-aside-header

.c-aside-content {
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    padding: var(--rt-aside-content-padding);

    // Change mat tab group styles
    .mat-mdc-tab-header {
        top: 0;
        z-index: 1000;
        position: sticky;
        background: var(--clr-white-100);
    }

    @include mixins.media-breakpoint-down(vars.$device-xs) {
        padding: var(--rt-aside-content-mobile-padding);
    }
} // c-aside-content

// ASIDE FOOTER
.c-aside-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    padding: var(--rt-aside-footer-padding);

    .c-aside-footer-btn {
        &__title {
            text-transform: uppercase;
        }
    }

    .c-aside-footer-btn + .c-aside-footer-btn {
        margin-left: var(--rt-aside-footer-margin-left-betwen-buttons);
    }

    @include mixins.media-breakpoint-down(vars.$device-xs) {
        padding: var(--rt-aside-footer-mobile-padding);
    }
} // c-aside-footer