/* Default button */
button {
    position: relative;
    box-sizing: border-box;
    border-radius: var(--rounded-m);
    border: none;
    max-width: 450px;
    position: relative;
    transition: var(--transition-duration);
}

button .button-text {
    color: var(--text-button);
}

button .button-icon-left {
    position: relative;
    margin-right: .5rem;
    color: var(--text-button);
}

button .button-icon-right {
    position: relative;
    margin-left: .5rem;
    color: var(--text-button);
}

button:hover { cursor: pointer;}
button:disabled { cursor: not-allowed;}
button:focus {
    outline-color: transparent;
    outline-style: solid;
}

/* Button sizes */
.button-s {
    min-width: 96px;
    padding: 8px 20px;
}

.button-s .button-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}

.button-m {
    min-width: 128px;
    padding: 10px 26px;
}

.button-m .button-text {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.button-l {
    min-width: 128px;
    padding: 12px 32px;
}

.button-l .button-text {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
}

/* Primary button */
.button-primary { background-color: var(--primary);}
.button-primary:hover { background-color: var(--primary-60);}
.button-primary:active { background-color: var(--primary-40);}
.button-primary:focus { box-shadow: 0 0 0 3px var(--primary-80);}
.button-primary:disabled { background-color: var(--primary-80);}
.button-primary:disabled:hover { background-color: var(--primary-80);}

/* secondary button */
.button-secondary { 
    box-sizing: border-box;
    border: 3px solid var(--primary);
    background-color: transparent;
    color: var(--primary);
}

.button-secondary:hover { 
    color: var(--text-button);
    background-color: var(--primary-60);
    border: 3px solid var(--primary-60);
}
.button-secondary:active { background-color: var(--primary-40);}
.button-secondary:focus { box-shadow: 0 0 0 3px var(--primary-80);}
.button-secondary:disabled { 
    border: 3px solid var(--primary-80);
    color: var(--primary-80);
}
.button-secondary:disabled:hover { background-color: var(--primary-80);}

/* CTA button */
.button-cta { background-color: var(--accent);}
.button-cta:hover { background-color: var(--accent-60);}
.button-cta:active { background-color: var(--accent-40);}
.button-cta:focus { box-shadow: 0 0 0 3px var(--accent-80);}
.button-cta:disabled { background-color: var(--accent-80);}
.button-cta:disabled:hover { background-color: var(--accent-80);}

/* Information button */
.button-info { background-color: var(--info);}
.button-info:hover { background-color: var(--info-60);}
.button-info:active { background-color: var(--info-40);}
.button-info:focus { box-shadow: 0 0 0 3px var(--info-80);}
.button-info:disabled { background-color: var(--info-80);}
.button-info:disabled:hover { background-color: var(--info-80);}

/* Success button */
.button-success { background-color: var(--success);}
.button-success:hover { background-color: var(--success-60);}
.button-success:active { background-color: var(--success-40);}
.button-success:focus { box-shadow: 0 0 0 3px var(--success-80);}
.button-success:disabled { background-color: var(--success-80);}
.button-success:disabled:hover { background-color: var(--success-80);}

/* Warning button */
.button-warning { background-color: var(--warning);}
.button-warning:hover { background-color: var(--warning-60);}
.button-warning:active { background-color: var(--warning-40);}
.button-warning:focus { box-shadow: 0 0 0 3px var(--warning-80);}
.button-warning:disabled { background-color: var(--warning-80);}
.button-warning:disabled:hover {background-color: var(--warning-80);}

/* Error button */
.button-error { background-color: var(--error);}
.button-error:hover { background-color: var(--error-60);}
.button-error:active { background-color: var(--error-40);}
.button-error:focus { box-shadow: 0 0 0 3px var(--error-80);}
.button-error:disabled { background-color: var(--error-80);}
.button-error:disabled:hover { background-color: var(--error-80);}