/**
 *  @package fuse-cms
 *
 *  This file contains the CSS styles for buttons in the Fuse CMS Framework.
 */

/*  ********************************************************************************  **

    CSS variables

**  ********************************************************************************  */

:root {
    
    /*  **********  Button Settings  **********  */
    
    --fuse-button-padding-x: 20px;
    --fuse-button-padding-y: 10px;
    --fuse-button-margin: 5px 0;
    --fuse-button-font-size: 1em;
    --fuse-button-line-height: 1.25em;
    --fuse-button-font-weight: normal;
    --fuse-button-border: 1px solid;
    --fuse-button-border-radius: 5px;
    
    --fuse-button-colour-border: #FF6868;
    --fuse-button-colour-background: #FF4D4D;
    --fuse-button-colour-background-hover: var(--fuse-button-colour-border);
    --fuse-button-colour-text: #FFFFFF;
    --fuse-button-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.4);
    
    
    
    
    /*  **********  Size settings  **********  */
    
    --fuse-button-size: 1;
    
}




/*  ********************************************************************************  **

    Set up our buttons

**  ********************************************************************************  */

a.button,
button,
.wp-block-button .wp-block-button__link,
input[type="submit"] {
    display: inline-block;
    margin: var(--fuse-button-margin);
    padding: calc(var(--fuse-button-padding-y) * var(--fuse-button-size)) calc(var(--fuse-button-padding-x) * var(--fuse-button-size));
    background: var(--fuse-button-colour-background);
    color: var(--fuse-button-colour-text);
    font-size: calc(var(--fuse-button-font-size) * var(--fuse-button-size));
    line-height: var(--fuse-button-line-height);
    font-weight: var(--fuse-button-font-weight);
    border: var(--fuse-button-border);
    border-color: var(--fuse-button-colour-border);
    border-radius: calc(var(--fuse-button-border-radius) * var(--fuse-button-size));
    text-decoration: none;
    cursor: pointer;
    position: relative;
}
a.button:hover,
button:hover,
.wp-block-button .wp-block-button__link:hover,
input[type="submit"]:hover  {
    background: var(--fuse-button-colour-background-hover);
}
a.button.shadow,
button.shadow,
.wp-block-button.shadow .wp-block-button__link,
input[type="submit"].shadow {
    box-shadow: var(--fuse-button-shadow);
}




/*  ********************************************************************************  **

    Icon buttons

**  ********************************************************************************  */

a.button.fuse-button-icon,
button.fuse-button-icon,
.wp-block-button.fuse-button-icon .wp-block-button__link {
    padding-left: calc(var(--fuse-button-padding-x) * 2.2 * var(--fuse-button-size));
}
.fuse-button-icon::before,
.fuse-button-icon a::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--fuse-button-padding-x) * var(--fuse-button-size));
    width: calc(var(--fuse-button-line-height) * var(--fuse-button-size));
    font-family: dashicons;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: normal !important;
}




/*  **********  Icon to right-hand side  *********  */

a.button.fuse-button-icon.fuse-button-icon-right,
button.fuse-button-icon.fuse-button-icon-right,
.wp-block-button.fuse-button-icon.fuse-button-icon-right .wp-block-button__link {
    padding-left: calc(var(--fuse-button-padding-x) * var(--fuse-button-size));
    padding-right: calc(var(--fuse-button-padding-x) * 2.2 * var(--fuse-button-size));
}
.fuse-button-icon.fuse-button-icon-right::before,
.fuse-button-icon.fuse-button-icon-right a::before {
    left: auto;
    right: calc(var(--fuse-button-padding-x) * var(--fuse-button-size));
    justify-content: flex-end;
}




/*  ********************************************************************************  **

    Button Sizes

**  ********************************************************************************  */

.fuse-button-xs {
    --fuse-button-size: 0.6;
}
.fuse-button-s {
    --fuse-button-size: 0.8;
}
.fuse-button-l {
    --fuse-button-size: 1.3;
}
.fuse-button-xl {
    --fuse-button-size: 1.8;
}