@use "./styles/babylon/reset.scss" as *;

@use "./styles/babylon/variables.scss" as *;
@use "./styles/babylon/mixins.scss" as *;
@use "./styles/babylon/slider.scss" as *;

@use "./styles/babylon/_spacing.scss" as *;
@use "./styles/babylon/common.scss" as *;
@use "./styles/babylon/globals.scss" as *;

.cdk-global-overlay-wrapper {
    display: flex;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
}

.mat-mdc-snack-bar-container .mdc-snackbar__surface {
    background-color: var(--cl_alert-background) !important;

    .mat-mdc-snack-bar-label,
    .mdc-button__label {
        color: var(--cl_alert-text) !important;
    }

    .mdc-button__label {
        transform: rotate(45deg);
    }

    .mat-mdc-button:hover {
        background-color: var(--cl_alert-background) !important;
        color: transparent !important;
    }

    &.error {
        background-color: var(--cl_alert-background-error) !important;

        .mat-mdc-snack-bar-label,
        .mdc-button__label {
            color: var(--cl_alert-text-error) !important;
        }

        .mat-mdc-button:hover {
            background-color: var(--cl_alert-background-error) !important;
        }
    }
}