@use "../config/variables";
@use "../tools/mixins";

.o-modal {
    & {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    
        @include mixins.centradoVertical;
    
        width: 100vw;
        height: 100vh;
        padding: 0 variables.$padding-modal;
        
        color: variables.$text-color-modal;

        background-color: variables.$bg-color-modal;
    }
    
    &__recuadro {
        display: flex;
        flex-direction: column;
        gap: variables.$gap-caja;

        padding: variables.$padding-mensaje;

        text-align: center;
        
        background-color: variables.$bg-mensaje-modal;
        border-radius: variables.$border-radius-contenedor;
    }

    &__titulo {
        font-size: variables.$fs-titulo-m;
    }
    
    &__descripcion {
        font-size: variables.$fs-texto;
    }
}

.js-cerrar-modal {
    visibility: hidden;
}