/* ####################################
   Buttons

   - Critical Rendering Path: Recommended
   - All additional classes should be used alongside .button - e.g. <a class="button button-secondary button-login">Login</a>
   ################################## */

.button,
.rotator .span-read-more a,
#CartButtons .cartButton {
    /* Some !important rules are required because of the way colors and other styles cascade in the design system. */
    -webkit-appearance: none; /* Stop IOS taking over when it's a form control. */
    position: relative;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    padding: var(--site-button-primary-padding);
    margin: 2px var(--site-padding-thin) 2px 0; /* When buttons wrap around lines we want some space between them, so add some vertical margin. Also put some space between side by side buttons using margin-right which is reset for the last child below. */
    max-width: 100%;
    line-height: 1;
    font-family: var(--site-font-family-bold);
    font-size: var(--site-button-primary-font-size);
    font-weight: var(--site-button-primary-font-weight);
    text-transform: uppercase;
    text-decoration: none !important;
    text-align: center;
    white-space: normal;
    color: var(--site-button-primary-text-color) !important;
    background: var(--site-button-primary-bg);
    background-repeat: no-repeat;
    border-color: var(--site-button-primary-border-color) !important;
    border-width: var(--site-primary-button-border-width);
    border-style: solid;
    border-radius: var(--site-button-primary-border-radius);
    cursor: pointer; /* Make sure all buttons show the same pointer, regardless of what HTML tag the button uses. */
}

    .button:last-child {
        margin-right: 0;
    }

    .button:hover,
    .button:focus {
        color: var(--site-button-primary-hover-text-color) !important;
        text-decoration: underline;
        background: var(--site-button-primary-hover-bg) !important;
        border-color: var(--site-button-primary-hover-border-color) !important;
    }

    .button:active {
        /*margin: 3px 0 1px 1px;*/ /* Nudge it to make it look like it's being pressed. */
    }

    fieldset.submitButtons input.button {
        margin: 0; /* Buttons in forms don't end up wrapping in standard scenarios, so the margin just messes up their layout a bit. */
    }

        fieldset.submitButtons input.button:active {
            /*margin: 1px 0 -1px 1px;*/ /* Nudge. */
        }

    button.button,
    input.button {
        /* Can't use ::before or ::after on elements that are replaceable by the operating system, e.g. buttons and form controls. */
    }

    /* Do buttons need to be different colors on different backgrounds? Tweak things here. */

    .bg-color-ui .button,
    .bg-color-ui-dark .button,
    .bg-color-1 .button,
    .bg-color-2 .button,
    .bg-color-3 .button,
    .bg-color-4 .button,
    .bg-color-5 .button,
    .bg-color-6 .button,
    .bg-color-7 .button,
    [class*=bg-mid-] .button,
    [class*=bg-mid-dark-] .button,
    [class*=bg-dark-] .button {
        color: var(--site-color-black) !important;
        background: var(--site-color-1-mid-light) !important;
        border-color: var(--site-color-1-mid-light) !important;
    }

        .bg-color-ui .button:hover,
        .bg-color-ui-dark .button:hover,
        .bg-color-1 .button:hover,
        .bg-color-2 .button:hover,
        .bg-color-3 .button:hover,
        .bg-color-4 .button:hover,
        .bg-color-5 .button:hover,
        .bg-color-6 .button:hover,
        .bg-color-7 .button:hover,
        [class*=bg-mid-] .button:hover,
        [class*=bg-mid-dark-] .button:hover,
        [class*=bg-dark-] .button:hover {
            color: var(--site-button-primary-hover-text-color) !important;
            background: var(--site-button-primary-hover-bg) !important;
            border-color: var(--site-button-primary-hover-border-color) !important;
        }

    .bg-color-ui-darker .button,
    .bg-color-ui-darkest .button,
    [class*=bg-darker-] .button,
    [class*=bg-darkest-] .button,
    .bg-black .button {
        color: var(--site-color-black) !important;
        background: var(--site-color-1-mid-light) !important;
        border-color: var(--site-color-1-mid-light) !important;
    }

        .bg-color-ui-darker .button:hover,
        .bg-color-ui-darkest .button:hover,
        [class*=bg-darker-] .button:hover,
        [class*=bg-darkest-] .button:hover,
        .bg-black .button:hover {
            color: var(--site-color-white) !important;
            background: var(--site-color-1-mid-dark) !important;
            border-color: var(--site-color-1-mid-dark) !important;
        }

    /* Lighter colors come after the dark !important rules because of block nesting. */

    .bg-color-ui-lightest .button,
    .bg-color-ui-lighter .button,
    .bg-color-ui-light .button,
    .bg-color-ui-mid-light .button,
    [class*=bg-lightest-] .button,
    [class*=bg-lighter-] .button,
    [class*=bg-light-] .button,
    [class*=bg-mid-light-] .button,
    .bg-white .button {
        color: var(--site-button-primary-text-color) !important;
        background: var(--site-button-primary-bg) !important;
        border-color: var(--site-button-primary-border-color) !important;
    }

        .bg-color-ui-lightest .button:hover,
        .bg-color-ui-lighter .button:hover,
        .bg-color-ui-light .button:hover,
        .bg-color-ui-mid-light .button:hover,
        [class*=bg-lightest-] .button:hover,
        [class*=bg-lighter-] .button:hover,
        [class*=bg-light-] .button:hover,
        [class*=bg-mid-light-] .button:hover,
        .bg-white .button:hover {
            color: var(--site-button-primary-hover-text-color) !important;
            background: var(--site-button-primary-hover-bg) !important;
            border-color: var(--site-button-primary-hover-border-color) !important;
        }

@media screen and (max-width: 600px) {

    .button {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        text-align: center;
        font-size: 100%;
    }

}

/*
    Alternate Button Styles
*/

.button-secondary {
    /* Some !important rules are required because of the way colors and other styles cascade in the design system. */
    font-size: var(--site-button-secondary-font-size);
    font-weight: var(--site-button-secondary-font-weight);
    text-decoration: none !important;
    padding: var(--site-button-secondary-padding);
    color: var(--site-button-secondary-text-color) !important;
    background: var(--site-button-secondary-bg);
    border-style: solid;
    border-color: var(--site-button-secondary-border-color) !important;
    border-width: var(--site-button-secondary-border-width);
    border-radius: var(--site-button-secondary-border-radius);
}

    .button-secondary:hover,
    .button-secondary:focus {
        color: var(--site-button-secondary-hover-text-color) !important;
        background: var(--site-button-secondary-hover-bg) !important;
        border-color: var(--site-button-secondary-hover-border-color) !important;
        text-decoration: none;
    }

    .button-secondary:after, a.button-secondary:after {
        content: "";  
        border-color: transparent var(--site-spot-color-1);  
        border-style: solid;  
        border-width: 0.45rem 0 0.45rem 0.55rem;  
        display: inline-block;  
        height: 0;  
        width: 0;  
        margin-left: 15px; 
        position: relative;
    }
        
    .button-secondary:hover:after, a.button-secondary:hover:after {
        border-color: transparent var(--site-color-white);
    }

    .button-secondary.button-next::after {
        border-color: transparent var(--site-button-secondary-text-color);
    }

    .button-secondary.button-next:hover::after,
    .button-secondary.button-next:focus::after {
        border-color: transparent var(--site-button-secondary-hover-text-color);
    }

    .button-secondary.button-back::before {
        border-color: transparent var(--site-button-secondary-text-color);
    }

    .button-secondary.button-back:hover::before,
    .button-secondary.button-back:focus::before {
        border-color: transparent var(--site-button-secondary-hover-text-color);
    }

    /* Do buttons need to be different colors on different backgrounds? Tweak things here. Example markup for dark backgrounds is provided. */

    .bg-color-ui .button-secondary,
    .bg-color-ui-dark .button-secondary,
    .bg-color-1 .button-secondary,
    .bg-color-2 .button-secondary,
    .bg-color-3 .button-secondary,
    .bg-color-4 .button-secondary,
    .bg-color-5 .button-secondary,
    .bg-color-6 .button-secondary,
    .bg-color-7 .button-secondary,
    [class*=bg-mid-] .button-secondary,
    [class*=bg-mid-dark-] .button-secondary,
    [class*=bg-dark-] .button-secondary {
        color: var(--site-button-secondary-text-color) !important;
        background: var(--site-button-secondary-bg) !important;
        border-color: var(--site-button-secondary-bg) !important;
    }

        .bg-color-ui .button-secondary:hover,
        .bg-color-ui-dark .button-secondary:hover,
        .bg-color-1 .button-secondary:hover,
        .bg-color-2 .button-secondary:hover,
        .bg-color-3 .button-secondary:hover,
        .bg-color-4 .button-secondary:hover,
        .bg-color-5 .button-secondary:hover,
        .bg-color-6 .button-secondary:hover,
        .bg-color-7 .button-secondary:hover,
        [class*=bg-mid-] .button-secondary:hover,
        [class*=bg-mid-dark-] .button-secondary:hover,
        [class*=bg-dark-] .button-secondary:hover {
            background: var(--site-button-primary-hover-bg) !important;
            border-color: var(--site-button-primary-hover-border-color) !important;
        }

    .bg-color-ui-darker .button-secondary,
    .bg-color-ui-darkest .button-secondary,
    [class*=bg-darker-] .button-secondary,
    [class*=bg-darkest-] .button-secondary,
    .bg-black .button-secondary {
        color: var(--site-button-secondary-text-color) !important;
        background: var(--site-button-secondary-bg) !important;
        border-color: var(--site-button-secondary-bg) !important;
    }

        .bg-color-ui-darker .button-secondary:hover,
        .bg-color-ui-darkest .button-secondary:hover,
        [class*=bg-darker-] .button-secondary:hover,
        [class*=bg-darkest-] .button-secondary:hover,
        .bg-black .button-secondary:hover {
            background: var(--site-color-1-mid-dark) !important;
            border-color: var(--site-color-1-mid-dark) !important;
        }

    /* Lighter colors come after the dark !important rules because of block nesting. */

    .bg-color-ui-lightest .button-secondary,
    .bg-color-ui-lighter .button-secondary,
    .bg-color-ui-light .button-secondary,
    .bg-color-ui-mid-light .button-secondary,
    [class*=bg-lightest-] .button-secondary,
    [class*=bg-lighter-] .button-secondary,
    [class*=bg-light-] .button-secondary,
    [class*=bg-mid-light-] .button-secondary,
    .bg-white .button-secondary {
        color: var(--site-button-secondary-text-color) !important;
        background: var(--site-button-secondary-bg) !important;
        border-color: var(--site-button-secondary-border-color) !important;
    }

        .bg-color-ui-lightest .button-secondary:hover,
        .bg-color-ui-lighter .button-secondary:hover,
        .bg-color-ui-light .button-secondary:hover,
        .bg-color-ui-mid-light .button-secondary:hover,
        [class*=bg-lightest-] .button-secondary:hover,
        [class*=bg-lighter-] .button-secondary:hover,
        [class*=bg-light-] .button-secondary:hover,
        [class*=bg-mid-light-] .button-secondary:hover,
        .bg-white .button:hover {
            color: var(--site-button-secondary-hover-text-color) !important;
            background: var(--site-button-secondary-hover-bg) !important;
            border-color: var(--site-button-secondary-hover-border-color) !important;
        }

.button-1 {
    /* Some !important rules are required because of the way colors and other styles cascade in the design system. */
    padding: var(--site-button-1-padding);
    font-weight: var(--site-button-1-font-weight);
    font-size: var(--site-button-1-font-size);
    color: var(--site-button-1-text-color) !important;
    background: var(--site-button-1-bg);
    border-color: var(--site-button-1-border-color) !important;
    border-width: var(--site-button-1-border-width);
    border-radius: var(--site-button-1-border-radius);
}

    .button-1:hover,
    .button-1:focus {
        color: var(--site-button-1-hover-text-color) !important;
        background: var(--site-button-1-hover-bg) !important;
        border-color: var(--site-button-1-hover-border-color) !important;
    }

.button-2 {
    /* Some !important rules are required because of the way colors and other styles cascade in the design system. */
    padding: var(--site-button-2-padding);
    font-weight: var(--site-button-2-font-weight);
    font-size: var(--site-button-2-font-size);
    color: var(--site-button-2-text-color) !important;
    background: var(--site-button-2-bg);
    border-color: var(--site-button-2-border-color) !important;
    border-width: var(--site-button-2-border-width);
    border-radius: var(--site-button-2-border-radius);
}

    .button-2:hover,
    .button-2:focus {
        color: var(--site-button-2-hover-text-color) !important;
        background: var(--site-button-2-hover-bg) !important;
        border-color: var(--site-button-2-hover-border-color) !important;
    }

/*
    Shapes (adjustments)
*/

.button.pill {
    padding-left: calc(var(--site-button-primary-padding-horizontal) * var(--site-button-pill-width-adjust));
    padding-right: calc(var(--site-button-primary-padding-horizontal) * var(--site-button-pill-width-adjust));
}

/* 
    Sizes
    - Some buttons are different sizes. If background images are used, these classes can be useful.
*/

    .button-short {
    }

    .button-long {
    }

    .button-huge {
    }

    .button-large {
        padding: var(--site-button-large-padding);
        font-size: var(--site-button-large-font-size);
        font-weight: var(--site-button-large-font-weight);
    }

        div.cols-2 > .col .button-large {
            width: 40%;
        }

        div.cols-3 > .col .button-large {
            width: 45%;
        }
        
        div.cols-4 > .col .button-large {
            width: 50%;
        }

    .button-small {
        padding: var(--site-button-small-padding);
        font-size: var(--site-button-small-font-size);
    }

    .button-tiny {
    }

@media screen and (max-width: 600px) {

    .button-large {
        padding: var(--site-button-large-padding-smallscreen);
        font-size: calc(var(--site-button-large-font-size) * 0.75);
    }

    div.cols-2 > .col .button-large,
    div.cols-3 > .col .button-large,
    div.cols-4 > .col .button-large {
        box-sizing: border-box;
        width: 100%;
    }

}

/* 
    Functions 
*/

    .button-next::after {
        content: "\f105"; /* \f35a is a nice alternative from Font Awesome Pro */
        position: relative;
        font-family: var(--site-icon-font-family);
        margin-left: calc(var(--site-button-padding-horizontal) * 0.5);
        /* Alternate idea if there are no icons: Make an arrow made from a border. */
        /*
        content: "";
        display: inline-block;
        vertical-align: middle;
        margin-top: -0.225rem;
        margin-left: 15px;
        height: 0;
        width: 0;
        border-color: transparent var(--site-button-primary-text-color);
        border-style: solid;
        border-width: 0.45rem 0 0.45rem 0.55rem;
        */
    }

        .button-next:hover::after,
        .button-next:focus::after{
            border-color: transparent #fff;
        }

    .button-next.text-left {
        /* Make sure there's room for the arrow/caret. */
        padding-right: calc(var(--site-button-padding-horizontal) + 1.25em);
    }

        .button-next.text-left::after {
            position: absolute;
            top: calc(50% - 0.5em);
            right: calc(var(--site-button-padding-horizontal) + var(--site-button-border-width));
            margin-left: 0;
            margin-top: 0;
        }

    .button-back::before,
    .button-previous::before {
        content: "\f104"; /* \f359 is a nice alternative from Font Awesome Pro */
        position: relative;
        font-family: var(--site-icon-font-family);
        margin-right: calc(var(--site-button-padding-horizontal) * 0.5);
        /* Alternate idea if there are no icons: Make an arrow made from a border. */
        /*
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 0;
        width: 0;
        margin-top: -0.225rem;
        margin-right: 15px;
        border-color: transparent var(--site-button-primary-text-color);
        border-style: solid;
        border-width: 0.45rem 0.55rem 0.45rem 0;
        */
    }

        .button-back:hover::before,
        .button-back:focus::before,
        .button-previous:hover::before,
        .button-previous:focus::before {
            border-color: transparent var(--site-button-primary-hover-text-color);
        }

/*
        Unfinished...

        .button-cart-add {}
        .button-cart-empty {}
        .button-checkout {}
        .cartButtons {}

        .button-submit-form {}
        .button-cms-form {}

        .button-add {}
        .button-delete {}
        .button-restore {}
        .button-update {}
        .button-continue {}

        .button-search {}
        .button-login {}
        .button-email {}
        .button-print {}
        .button-more-info {}
        .button-cta {}

        .button-up {}
        .button-down {}
        .button-back {}
        .button-previous {}
        .button-next {}
        .button-previous {}

        .button-apply {}
        .button-cancel {}
        .button-save {} 

        .button-start {}
        .button-resume {}
        .button-go {}
    */