@use "../configuraciones/variables";
@use "../herramientas/mixins";

.m-aviso {
    padding: 0.5rem;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 2px;
    outline: white solid 2px;
    outline-offset: -7px;  
    
    &--shadow-rojo {
        box-shadow: 0 0 3rem red inset;
    }
    
    &--shadow-naranja {
        box-shadow: 0 0 3rem orange inset;
    }
    
    &--shadow-amarillo {
        box-shadow: 0 0 3rem yellow inset;
    }
    
    &--shadow-verde {
        box-shadow: 0 0 3rem rgba(0, 255, 0, 50%) inset;
    }

    @media screen and (min-width: variables.$tamaño-desktop){
        font-size: variables.$fs-movil-aviso;
    }
}

