/* Buttons */

.buttons {
    display: inline-flex;
    flex-wrap: wrap;

    &:not(.no-gap) {
        gap: 10px;
    }
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: top;
    position: relative;
    border: 2px solid transparent;
    background-color: transparent;
    color: currentColor;
    min-width: 32px;
    min-height: 32px;
    font-weight: 400;
    font-size: var(--15px);
    line-height: 18px;
    letter-spacing: 0.0125em;
    word-spacing: 0.05em;
    padding: 10px 16px;
    gap: 14px;

    i, span {
        display: inline-flex;
        position: relative;
        z-index: 15;
    }

    &.bold {
        font-weight: 500;
    }

    &.thin {
        font-weight: 300;
    }

    &.uppercase {
        text-transform: uppercase;
    }

    &.full-width {
        width: 100%;
    }


    &, & span, &::before, &::after {
        border-radius: var(--border-radius, 0px);
    }



    &:not(.square):not(.rounded):not(.round) {
        &, & span, &::before, &::after {
            --border-radius: 9px;
        }
    }

    &.rounded {
        &, & span, &::before, &::after {
            --border-radius: 999px;
        }
    }

    &.round {
        &, & span, &::before, &::after {
            --border-radius: 6px;
        }
    }

    &.square {
        &, & span, &::before, &::after {
            --border-radius: 0;
        }
    }

    &.compact {

        &:not(.icon):not(.square):not(.rounded) {
            &, & span, &::before, &::after {
                --border-radius: 6px;
            }
        }

    }

    &.mini {

        &:not(.square):not(.rounded) {
            &, & span, &::before, &::after {
                --border-radius: 6px;
            }
        }

    }





    /*&:not(.square):not(.rounded):not(.round) {*/
    /*    &, & span, &::before, &::after {*/
    /*        border-radius: 9px;*/
    /*    }*/
    /*}*/

    /*&.rounded {*/
    /*    &, & span, &::before, &::after {*/
    /*        border-radius: 999px;*/
    /*    }*/
    /*}*/

    /*&.round {*/
    /*    &, & span, &::before, &::after {*/
    /*        border-radius: 6px;*/
    /*    }*/
    /*}*/

    /*&.square {*/
    /*    &, & span, &::before, &::after {*/
    /*        border-radius: 0;*/
    /*    }*/
    /*}*/

    /*&.compact {*/

    /*    &:not(.icon):not(.square):not(.rounded) {*/
    /*        &, & span, &::before, &::after {*/
    /*            border-radius: 6px;*/
    /*        }*/
    /*    }*/

    /*}*/


    body.ready & {
        &:not(.no-transition) {
            transition: 0.25s;
        }
    }
}

.button.large:not(.icon) {
    font-size: 1rem;
    line-height: 20px;
    padding: 14px 22px;
    gap: 16px;
}

.button.medium:not(.icon) {
    padding: 12px 20px;
}

.button.compact:not(.icon) {
    font-size: var(--14px);
    line-height: 16px;
    padding: 8px 12px;
    gap: 10px;
}

.button:not(.large):not(.compact):not(.icon) > i.icon:not([class*="svg-"]) > svg,
.button.medium > i.icon:not([class*="svg-"]) > svg {
    transform: scale( 0.75 );
}

.button.large > i.icon:not([class*="svg-"]) > svg {
    transform: scale( 0.875 );
}

.button.compact > i.icon:not([class*="svg-"]) > svg {
    transform: scale( 0.625 );
}

.button.icon > i.icon:not([class*="svg-"]) > svg {
    transform: scale( 0.75 );
}

.button.icon.mini > i.icon:not([class*="svg-"]) > svg {
    transform: scale( 0.5 );
}

.button:not(.disabled):not([disabled]) {
    cursor: pointer;
}

.button.disabled,
.button[disabled] {
    cursor: not-allowed;
}

.button.disabled:not(.no-opacity),
.button[disabled]:not(.no-opacity) {
    opacity: 0.45;
}

.button:not(.simple):not(.plain) {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.button:not(.simple):not(.plain):not(:focus):not(.focus) {
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.button.text,
.button.no-border {
    border: none !important;
}

.button.text {
    padding: 0 !important;
    min-height: 0 !important;
    font-weight: 500;
    gap: 0 12px;
}

.button.icon {
    width: 40px;
    height: 40px;
    padding: 0 !important;
}

.button.icon.compact {
    width: 36px;
    height: 36px;
}

.button.icon.tiny {
    width: 32px;
    height: 32px;
}

.button.icon.mini {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
}

.button.icon > span {
    line-height: 0;
}

.button > i.icon {
    width: 24px;
    height: 24px;
    margin: -24px -4px;
}

.button > i.icon.m0 {
    margin-left: 0px;
    margin-right: 0px;
}

.button > i.icon.m4 {
    margin-left: -4px;
    margin-right: -4px;
}

.button > i.icon.m6 {
    margin-left: -6px;
    margin-right: -6px;
}

.button > i.icon.m8 {
    margin-left: -8px;
    margin-right: -8px;
}

.button:not(.disabled):not([disabled]):not(.static):hover > i.icon.animate-left,
.button:not(.disabled):not([disabled]):not(.static):focus > i.icon.animate-left {
    transform: translateX( -20% );
}

.button:not(.disabled):not([disabled]):not(.static):hover > i.icon.animate-right,
.button:not(.disabled):not([disabled]):not(.static):focus > i.icon.animate-right {
    transform: translateX( 20% );
}

.button:not(.disabled):not([disabled]):not(.static):hover > i.icon.animate-scale,
.button:not(.disabled):not([disabled]):not(.static):focus > i.icon.animate-scale {
    transform: scale( 1.2 );
}




/* Button Shadow */

.button {

    &.shadow {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.125);

        &[href]:hover,
        &[href]:focus {
            box-shadow: 0 3px 10px 1px rgba(0, 0, 0, 0.1875);
        }
    }

}






/* Button Primary */

.button.primary {
    color: #fff;
    border-color: var(--theme-primary-color);
    background-color: var(--theme-primary-color);
}

.button.primary.outline {
    outline-color: var(--theme-primary-color);
}

.button.primary:not(.disabled):not([disabled]):not(.static):hover,
.button.primary:not(.disabled):not([disabled]):not(.static):focus {
    border-color: var(--theme-primary-hover);
    background-color: var(--theme-primary-hover);
    outline-color: var(--theme-primary-hover);
}





/* Button Secondary */

.button.secondary {
    color: #fff;
    border-color: var(--theme-secondary-color);
    background-color: var(--theme-secondary-color);
}

.button.secondary.outline {
    outline-color: var(--theme-secondary-color);
}

.button.secondary:not(.disabled):not([disabled]):not(.static):hover,
.button.secondary:not(.disabled):not([disabled]):not(.static):focus {
    border-color: var(--theme-secondary-hover);
    background-color: var(--theme-secondary-hover);
    outline-color: var(--theme-secondary-hover);
}



/* Button Tertiary */

.button.tertiary {
    color: #fff;
    border-color: var(--theme-tertiary-color);
    background-color: var(--theme-tertiary-color);
}

.button.tertiary.outline {
    outline-color: var(--theme-tertiary-color);
}

.button.tertiary:not(.disabled):not([disabled]):not(.static):hover,
.button.tertiary:not(.disabled):not([disabled]):not(.static):focus {
    border-color: var(--theme-tertiary-hover);
    background-color: var(--theme-tertiary-hover);
    outline-color: var(--theme-tertiary-hover);
}





/* Button Positive */

.button.positive {
    color: #fff;
    border-color: var(--theme-positive-color);
    background-color: var(--theme-positive-color);
}

.button.positive.outline {
    outline-color: var(--theme-positive-color);
}

.button.positive:not(.disabled):not([disabled]):not(.static):hover,
.button.positive:not(.disabled):not([disabled]):not(.static):focus {
    border-color: var(--theme-positive-hover);
    background-color: var(--theme-positive-hover);
    outline-color: var(--theme-positive-hover);
}





/* Button Negative */

.button.negative {
    color: #fff;
    border-color: var(--theme-negative-color);
    background-color: var(--theme-negative-color);
}

.button.negative.outline {
    outline-color: var(--theme-negative-color);
}

.button.negative:not(.disabled):not([disabled]):not(.static):hover,
.button.negative:not(.disabled):not([disabled]):not(.static):focus {
    border-color: var(--theme-negative-hover);
    background-color: var(--theme-negative-hover);
    outline-color: var(--theme-negative-hover);
}





/* Button Warning */

.button.warning {
    color: #fff;
    border-color: var(--theme-warning-color);
    background-color: var(--theme-warning-color);
}

.button.warning.outline {
    outline-color: var(--theme-warning-color);
}

.button.warning:not(.disabled):not([disabled]):not(.static):hover,
.button.warning:not(.disabled):not([disabled]):not(.static):focus {
    border-color: var(--theme-warning-hover);
    background-color: var(--theme-warning-hover);
    outline-color: var(--theme-warning-hover);
}





/* Button White */

.button.white {
    color: #000;
    background-color: var(--theme-white);
    border-color: var(--theme-white);

    &.border {
        outline-offset: -1px !important;
        border: 1px solid var(--theme-grayish) !important;
    }
}

.button.white.outline {
    outline-color: var(--theme-black);
}

.button.white:not(.disabled):not([disabled]):not(.static):hover,
.button.white:not(.disabled):not([disabled]):not(.static):focus {
    border-color: var(--theme-white);
    background-color: var(--theme-white);
    outline-color: var(--theme-black);

    &.border {
        border: 1px solid var(--theme-grayish) !important;
        outline-offset: -1px !important;
        &:focus {
            outline-offset: 2px !important;
        }
    }

}





/* Button White */

.button.black {
    color: #fff;
    border-color: var(--theme-black);
    background-color: var(--theme-black);
}

.button.black.outline {
    outline-color: var(--theme-black);
}

.button.black:not(.disabled):not([disabled]):not(.static):hover,
.button.black:not(.disabled):not([disabled]):not(.static):focus {
    border-color: var(--theme-black);
    background-color: var(--theme-black);
    outline-color: var(--theme-black);
}





/* Button Text Colours */

.button.color-black { color: var(--theme-black); }
.button.color-white { color: var(--theme-white); }
.button.color-basic { color: var(--theme-basic-color); }
.button.color-primary { color: var(--theme-primary-color); }
.button.color-secondary { color: var(--theme-secondary-color); }
.button.color-tertiary { color: var(--theme-tertiary-color); }
.button.color-negative { color: var(--theme-negative-color); }
.button.color-warning { color: var(--theme-warning-color); }
.button.color-positive { color: var(--theme-positive-color); }

.button.outline-black { outline-color: var(--theme-black) !important; }
.button.outline-white { outline-color: var(--theme-white) !important; }
.button.outline-basic { outline-color: var(--theme-basic-color) !important; }
.button.outline-primary { outline-color: var(--theme-primary-color) !important; }
.button.outline-secondary { outline-color: var(--theme-secondary-color) !important; }
.button.outline-tertiary { outline-color: var(--theme-tertiary-color) !important; }
.button.outline-negative { outline-color: var(--theme-negative-color) !important; }
.button.outline-warning { outline-color: var(--theme-warning-color) !important; }
.button.outline-positive { outline-color: var(--theme-positive-color) !important; }