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

.m-card {
    padding: 1rem;
    border: 3px solid variables.$color-principal;
    border-radius: 1rem;
    text-align: center;

    &__titulo {
        margin: 0;
        font-size: variables.$fs-movil-title-s;
    }

    &__titulo--grande {
        font-size: variables.$fs-movil-title-m;
    }

    &__cantidad {
        margin: 0;
        font-size: variables.$fs-movil-numero-m;
        font-family: variables.$font-family-numerica;
        color: variables.$color-principal;

        &--verde {
            color: #72ff72;    
        }

        &--amarilla {
            color: #ffff57;
        }

        &--naranja {
            color: #ffb732;    
        }

        &--rojo {
            color: #ff6c6c;    
        }

        &--azul {
            color: #37c3ff;
        }
    }

    &__cantidad--grande {
        font-size: variables.$fs-movil-numero-l;
    }

    &__unidad-medida {
        margin: 0;
        font-size: variables.$fs-movil-texto;
    }

    @media screen and (max-width: 883px) and (orientation: landscape){
        &__titulo {
            font-size: variables.$fs-movil-title-s;
        }

        &__titulo--grande {
            font-size: variables.$fs-movil-title-s;
        }

        &__cantidad {
            font-size: variables.$fs-movil-numero-s;
        }

        &__cantidad--grande {
            font-size: variables.$fs-movil-numero-m;
        }
    }

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

        &__cantidad {
            font-size: variables.$fs-tablet-numero-s;
        }

        &__cantidad--grande {
            font-size: variables.$fs-tablet-numero-m;
        }
    }
}
