@use "../config/variables";

.o-boton {
    & {
        width: 100%;
        padding: variables.$padding-boton 0;
        
        font-size: variables.$fs-boton;
        font-family: inherit;

        border: variables.$border-input solid variables.$border-color;
        border-radius: variables.$border-radius-input;
        
        cursor: pointer;
    }

    &:disabled {
        cursor: not-allowed;
        background-color: variables.$btn-bg-color-rojo-hover;
    }

    &:disabled:hover {
        cursor: not-allowed;
        background-color: variables.$btn-bg-color-rojo-hover;
    }

    &--is-oculto {
        visibility: hidden;
    }

    &--azul {

        & {
            color: variables.$btn-text-color-azul;
            background-color: variables.$btn-bg-color-azul;
        }
        
        &:hover,
        &:focus {
            background-color: variables.$btn-bg-color-azul-hover;
        }
    }

    &--negro {

        & {
            color: variables.$btn-text-color-negro;
            background-color: variables.$btn-bg-color-negro;
        }
        
        &:hover,
        &:focus {
            background-color: variables.$btn-bg-color-negro-hover;
        }
    }

    &--rojo {

        & {
            color: variables.$btn-text-color-actualizar;
            background-color: variables.$btn-bg-color-rojo;
        }
        
        &:hover,
        &:focus {
            background-color: variables.$btn-bg-color-rojo-hover;
            color: variables.$btn-text-color-actualizar-hover;

        }
    }

    &--verde {

        & {
            color: variables.$btn-text-color-actualizar;
            background-color: variables.$btn-bg-color-verde;
        }
        
        &:hover,
        &:focus {
            background-color: variables.$btn-bg-color-verde-hover;
            color: variables.$btn-text-color-actualizar-hover;
        }
    }
}