/* Bootstrap buttons style replacement */

.btn {
    display: inline-block;
    text-align: center;
    font-size: 1em;
    padding: 0.6em 0.9em;
    cursor: pointer;
    border: none;
    transition-duration: 0.3s;

    &.btn-small {
        font-size: 0.8em;
        padding: 0.4em 0.6em;
    }

    &.btn-lg {
        font-size: 1.2em;
    }

    &.btn-primary {
        background-color: var(--azul);
        border-color: var(--azul);
        color: white;

        &:hover {
            background-color: var(--azul-80);
        }
    }

    &.btn-outline-primary {
        border: none;
        color: var(--azul);
        background-color: transparent;
        box-shadow: inset 0 0 0 var(--line-thickness) var(--azul);

        &:hover {
            color: white;
            background-color: var(--azul);
        }
    }

    &.btn-outline-secondary {
        border: none;
        color: var(--naranja);
        background-color: transparent;
        box-shadow: inset 0 0 0 var(--line-thickness) var(--naranja);

        &:hover {
            color: white;
            background-color: var(--naranja);
        }
    }

    &.btn-outline-light {
        border: none;
        color: white;
        background-color: transparent;
        box-shadow: inset 0 0 0 var(--line-thickness) white;

        &:hover {
            color: var(--azul);
            background-color: white;
        }
    }

    &.btn-danger {
        background-color: darkred;
        border-color: darkred;
        color: white;

        &:hover {
            background-color: firebrick;
        }
    }

    &.btn-outline-danger {
        border: none;
        color: darkred;
        background-color: transparent;
        box-shadow: inset 0 0 0 var(--line-thickness) darkred;

        &:hover {
            color: white;
            background-color: darkred;
        }
    }

    &.btn-naked {
        background-color: transparent;
        color: var(--azul-80);
        border: none;

        &:hover {
            color: var(--azul);
        }
    }
}