@charset "UTF-8";
/**
 *  @package mariart
 *
 *  This class sets up our button styles for the Mariart system.
 */

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

    CSS variables

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

:root {
    
    --mariart-button-padding-x: 20px;
    --mariart-button-padding-y: 10px;
    
    --mariart-button-border-width: 1px;
    --mariart-button-border-style: solid;
    --mariart-button-border-colour: var(--mariart-colour-secondary);
    --mariart-button-border-radius: 10px;
    
    --mariart-button-margin: 5px;
    
    --mariart-button-size-xs: 0.6;
    --mariart-button-size-s: 0.8;
    --mariart-button-size-l: 1.3;
    --mariart-button-size-xl: 1.7;
    --mariart-button-size-xxl: 2;
    
    --mariart-button-background: var(--mariart-colour-secondary);
    --mariart-button-background-hover: var(--mariart-colour-primary);
    
    --mariart-button-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.4);
    
}




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

    Buttons

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

button,
a.button,
.wp-block-button a,
input[type="submit"] {
    display: inline-block;
    margin: var(--mariart-button-margin) 0;
    padding: var(--mariart-button-padding-y) var(--mariart-button-padding-x);
    font-family: var(--mariart-font-family-text);
    font-size: var(--mariart-font-size-p);
    line-height: var(--mariart-line-height-heading);
    font-weight: var(--mariart-font-weight-medium);
    text-decoration: none;
    color: var(--mariart-colour-white);
    background: var(--mariart-button-background);
    border: var(--mariart-button-border-width)  var(--mariart-button-border-style) var(--mariart-button-border-colour);
    border-radius: var(--mariart-button-border-radius);
    box-sizing: border-box;
    cursor: pointer;
}
button:hover,
a.button:hover,
.wp-block-button a:hover,
input[type="submit"]:hover {
    background-color: var(--mariart-button-background-hover);
}




/*  *********  Drop shadow  **********  */

button.shadow,
a.button.shadow,
.wp-block-button.shadow a,
.wp-block-buttons.shadow .wp-block-button a,
input[type="submit"].shadow {
    box-shadow: var(--mariart-button-shadow);
}




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

    Button sizes

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

/*  **********  Extra small  *********  */

button.mariart-button-xs,
a.button.mariart-button-xs,
.wp-block-button.mariart-button-xs a,
.wp-block-buttons.mariart-button-xs .wp-block-button a,
input[type="submit"].mariart-button-xs {
    padding: calc(var(--mariart-button-padding-y) * var(--mariart-button-size-xs)) calc(var(--mariart-button-padding-x) * var(--mariart-button-size-xs));
    font-size: calc(var(--mariart-font-size-p) * var(--mariart-button-size-xs));
    border-radius: calc(var(--mariart-button-border-radius) * var(--mariart-button-size-xs));
}




/*  **********  Small  *********  */

button.mariart-button-s,
a.button.mariart-button-s,
.wp-block-button.mariart-button-s a,
.wp-block-buttons.mariart-button-s .wp-block-button a,
input[type="submit"].mariart-button-s {
    padding: calc(var(--mariart-button-padding-y) * var(--mariart-button-size-s)) calc(var(--mariart-button-padding-x) * var(--mariart-button-size-s));
    font-size: calc(var(--mariart-font-size-p) * var(--mariart-button-size-s));
    border-radius: calc(var(--mariart-button-border-radius) * var(--mariart-button-size-s));
}




/*  **********  Large  *********  */

button.mariart-button-l,
a.button.mariart-button-l,
.wp-block-button.mariart-button-l a,
.wp-block-buttons.mariart-button-l .wp-block-button a,
input[type="submit"].mariart-button-l {
    padding: calc(var(--mariart-button-padding-y) * var(--mariart-button-size-l)) calc(var(--mariart-button-padding-x) * var(--mariart-button-size-l));
    font-size: calc(var(--mariart-font-size-p) * var(--mariart-button-size-l));
    border-radius: calc(var(--mariart-button-border-radius) * var(--mariart-button-size-l));
}




/*  **********  Extra large  *********  */

button.mariart-button-xl,
a.button.mariart-button-xl,
.wp-block-button.mariart-button-xl a,
.wp-block-buttons.mariart-button-xl .wp-block-button a,
input[type="submit"].mariart-button-xl {
    padding: calc(var(--mariart-button-padding-y) * var(--mariart-button-size-xl)) calc(var(--mariart-button-padding-x) * var(--mariart-button-size-xl));
    font-size: calc(var(--mariart-font-size-p) * var(--mariart-button-size-xl));
    border-radius: calc(var(--mariart-button-border-radius) * var(--mariart-button-size-xl));
}




/*  **********  XX large  *********  */

button.mariart-button-xxl,
a.button.mariart-button-xxl,
.wp-block-button.mariart-button-xxl a,
.wp-block-buttons.mariart-button-xxl .wp-block-button a,
input[type="submit"].mariart-button-xxl {
    padding: calc(var(--mariart-button-padding-y) * var(--mariart-button-size-xxl)) calc(var(--mariart-button-padding-x) * var(--mariart-button-size-xxl));
    font-size: calc(var(--mariart-font-size-p) * var(--mariart-button-size-xxl));
    border-radius: calc(var(--mariart-button-border-radius) * var(--mariart-button-size-xxl));
}