@import "../libs/metroui/css/metro-all.min.css" layer(base);
@import "../libs/metroui/css/metro-icons.min.css" layer(base);

@layer afterMetro {
    /*Requerido para que funcione el cropper*/
    .cropper div {
        position: initial;
    }
    /*Utilizado para cambiar el tamaño del checkbox caption con las clases de tamaño de texto*/
    .checkbox .caption.text-small {
        font-size: 0.75rem;
    }
    .checkbox .caption.text-secondary {
        font-size: 0.875rem;
    }
    /*Utilizado para cambiar el tamaño del radio y checkbox caption con las clases de tamaño de texto*/
    .radio .caption.text-small {
        font-size: 0.75rem;
    }
    .radio .caption.text-secondary {
        font-size: 0.875rem;
    }
    .switch-material .caption.text-small {
        font-size: 0.75rem;
    }
    .switch-material .caption.text-secondary {
        font-size: 0.875rem;
    }
    /*Quitados márgenes negativos de .row*/
    .row {
        margin-left: 0;
        margin-right: 0;
    }
    /*Quitado padding de 2rem y 2.5rem a la derecha e izquierda de opciones en select*/
    .select .option-list a {
        padding: 0 4px 0 4px
    }
    /* Arreglos a la distancia a la que se muestran los toast */
    .toast:not(.show-top) {
        bottom: calc(20px + var(--safe-area-inset-bottom)) !important;
    }
    .toast.show-top {
        top: calc(20px + var(--safe-area-inset-top)) !important;
    }
    /*Margin para fixed-bottom*/
    .fixed-bottom {
        margin-bottom: 5px;
    }
    /*Unidades relativas a viewport dinámicas, si es posible*/
    .h-vh-100 {
        height: calc(var(--vh) * 100) !important;
    }
    .h-vh-50 {
        height: calc(var(--vh) * 50) !important;
    }
    .h-vh-75 {
        height: calc(var(--vh) * 75) !important;
    }
}