/** Buttons **/
/**
    use:
        For a standard button: c-btn c-btn-primary
        For an outline button: c-btn c-btn-primary-outline
    Naming convention is the same as bootstrap
 */
/** Note: We have analogues for all bootstrap buttons; following the bootstrap naming convention with c-* prefix **/
.c-btn {
    border: 2px solid transparent;
    border-radius: .25em;
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
    color: #fff;
    cursor: pointer;
    font-weight: 400;
    font-size: 1rem;
    padding: .375rem .75rem;
    text-align: center;
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    user-select: none;
}


/**
 * NOTE: c-btn shouldn't have generic colour variable definitions, back-porting temporarily
 */
.c-btn:hover {
    background-color: rgba(var(--breto-azure-rgb), .9);
    color: #fff;
}

.c-btn:focus {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

.c-btn:disabled,
.c-btn[disabled] {
    background: repeating-linear-gradient(
        45deg,
        #ccc,
        #ccc 10px,
        #ddd 10px,
        #ddd 20px
    );
    color: #333;
    padding: 10px 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    cursor: not-allowed;
    transition: background 0.3s ease;
}

/** todo: rename fixed-width **/
.c-btn-fixed {
    width: min(100%, 150px);
}

/** deprecated **/
.c-btn--breto-gray {
    background-color: var(--breto-cool-gray);
}

.c-btn--breto-gray:hover {
    background-color: rgba(var(--breto-cool-gray-rgb), .9);
    border: 2px solid var(--breto-cool-gray);
}

.c-btn--breto-gray:focus {
    color: var(--breto-cool-gray);
    background-color: transparent;
    border: 1px solid var(--breto-cool-gray);
}
/** end-deprecated **/

.c-btn-primary {
    background-color: var(--breto-azure);
    color: #fff;
}

.c-btn-primary:hover {
    background-color: rgba(var(--breto-azure-rgb), .9);
    color: #fff;
}

.c-btn-primary-outline {
    color: var(--breto-azure);
    border: 2px solid var(--breto-azure);
}

.c-btn-primary-outline:hover {
    background-color: var(--breto-azure);
    color: #fff;
}

.c-btn-secondary {
    background-color: var(--breto-cool-gray);
    color: #fff;
}

.c-btn-secondary:hover {
    background-color: rgba(var(--breto-cool-gray-rgb), .9);
}

.c-btn-secondary-outline {
    background-color: transparent;
    color: var(--breto-cool-gray);
    border: 2px solid var(--breto-cool-gray);
}

.c-btn-secondary-outline:hover {
    color: #fff;
    background-color: var(--breto-cool-gray);
}

.c-btn-success {
    background-color: var(--util-green);
    color: #fff;
}

.c-btn-success:hover {
    background-color: rgba(var(--util-green-rgb), .8);
}

.c-btn-success-outline {
    background-color: transparent;
    color: var(--util-green);
    border: 2px solid var(--util-green);
}

.c-btn-success-outline:hover {
    background-color: var(--util-green);
    color: #fff;
}

.c-btn-danger {
    background-color: var(--util-red);
    border: 2px solid transparent;;
    color: #fff;
}

.c-btn-danger:hover {
    background-color: rgba(var(--util-red-rgb), .8);
}

.c-btn-danger-outline {
    background-color: transparent;
    color: var(--util-red);
    border: 2px solid var(--util-red);
}

.c-btn-danger-outline:hover {
    background-color: var(--util-red);
    color: #fff;
}

.c-btn-warning {
    background-color: var(--util-yellow);
    border: 2px solid transparent;;
    color: #000;
}

.c-btn-warning:hover {
    background-color: rgba(var(--util-yellow-rgb), .7);
    color: #424242;
}

.c-btn-warning-outline {
    color: #000;
    background-color: transparent;
    border: 2px solid var(--util-yellow);
}

.c-btn-warning-outline:hover {
    background-color: var(--util-yellow);
}


.c-btn-info {
    background-color: var(--util-blue);
    border: 2px solid transparent;
    color: #fff;
}

.c-btn-info:hover {
    background-color: rgba(var(--util-blue-rgb), .8);
}

.c-btn-info:focus {
    background-color: rgba(var(--util-blue-rgb), .8);
}

.c-btn-info-outline {
    background-color: transparent;
    color: var(--util-blue);
    border: 2px solid var(--util-blue);
}

.c-btn-info-outline:hover {
    background-color: var(--util-blue);
    color: #fff;
}


.c-btn-light {
    background-color: var(--util-gray);
    border: 2px solid transparent;;
    color: #000;
}

.c-btn-light:hover {
    background-color: rgba(var(--util-gray-rgb), .8);
}

.c-btn-light-outline {
    background-color: transparent;
    color: #000;
    border: 2px solid var(--util-gray);
}

.c-btn-light-outline:hover {
    background-color: rgb(var(--util-gray-rgb));
}

.c-btn-dark {
    background-color: var(--util-black);
    border: 2px solid transparent;
    color: #fff;
}

.c-btn-dark:hover {
    background-color: rgba(var(--util-black-rgb), .8);
}

.c-btn-dark-outline {
    background-color: transparent;
    color: var(--util-black);
    border: 2px solid var(--util-black);
}

.c-btn-dark-outline:hover {
    background-color: rgb(var(--util-black-rgb));
    color: #fff;
}


/* bugs out */
button:disabled.c-btn,
button:disabled.c-btn:hover,
button:disabled.c-btn:active,
button:disabled.c-btn:focus {
    background: transparent;
    border: 1px solid #ddd;
    color: #272727;
    opacity: 0.8;
    background-size: 10px 10px;
    background-image: repeating-linear-gradient(45deg, #8c8c8c 0, #8c8c8c 1px, #e5e5f7 0, #e5e5f7 50%);
    cursor: default;
}
/** End Buttons **/