/* button */

.button {
    padding: var(--button-padding, var(--default-button-padding, 0.75em 1em));
    box-sizing: var(--button-box-sizing, var(--default-button-box-sizing, border-box));
}

.button-rounded {
    padding: var(--button-rounded-padding, var(--default-button-rounded-padding, 0.75em 1em));
    border-radius: var(--button-rounded-border-radius, var(--default-rounded-border-radius, 0.25em));
    box-sizing: var(--button-rounded-box-sizing, var(--default-button-rounded-box-sizing, border-box));
}

.button-circle {
    padding: var(--button-circle-padding, var(--default-circle-padding, 1em));
    border-radius: var(--button-circle-border-radius, var(--default-circle-border-radius, 50em));
    box-sizing: var(--button-circle-box-sizing, var(--default-button-circle-box-sizing, border-box));
}

.button-pianokey {
    height: var(--button-pianokey-height, 5em);
    padding: var(--button-pianokey-padding, var(--default-pianokey-padding, 1em));
    border-radius: var(--button-pianokey-border-radius, var(--default-pianokey-border-radius, 50em));
    box-sizing: var(--button-pianokey-box-sizing, var(--default-button-pianokey-box-sizing, border-box));
}

.button-leaf {
    padding: var(--button-leaf-padding, var(--default-leaf-padding, 1em));
    border-radius: var(--button-leaf-border-radius, var(--default-leaf-border-radius, 0.25em 1em));
    box-sizing: var(--button-leaf-box-sizing, var(--default-button-leaf-box-sizing, border-box));
}

.button,
.button-rounded,
.button-circle,
.button-pianokey,
.button-leaf {
    display: var(--button-display, var(--default-button-display, inline-flex));
    position: var(--button-position, var(--default-button-position, relative));
    justify-content: center;
    align-items: center;
    font-family: var(--button-font-family, var(--default-button-font-family, "Montserrat", Arial, serif));
    font-weight: var(--button-font-weight, var(--default-button-font-weight, 700));
    line-height: var(--button-line-height, var(--default-button-line-height, normal));
    text-decoration: var(--button-text-decoration, var(--default-button-text-decoration, none));
    text-align: center;
    text-transform: var(--button-text-transform, var(--default-button-text-transform, 700));
    letter-spacing: var(--button-letter-spacing, var(--default-button-letter-spacing, 0.125em));
    white-space: nowrap;
    font-size: var(--button-font-size, var(--default-button-font-size, 1rem));
    background-color: var(--button-background-color, var(--default-button-background-color, #0089cf));
    color: var(--button-color, var(--default-button-color, #ffffff));
    -webkit-transition-property: background-color; 
    -webkit-transition-duration: var(--button-transition-duration, var(--default-button-transition-duration, 300ms));
    -webkit-transition-timing-function: ease-out;
    -moz-transition-property: background-color; 
    -moz-transition-duration: var(--button-transition-duration, var(--default-button-transition-duration, 300ms));
    -moz-transition-timing-function: ease-out;
    transition-property: background-color; 
    transition-duration: var(--button-transition-duration, var(--default-button-transition-duration, 300ms));
    transition-timing-function: ease-out;
    -webkit-appearance: none;
    border-style: var(--button-border-style, var(--default-button-border-style, solid));
    border-width: var(--button-border-width, var(--default-button-border-width, 0px));
    border-color: var(--button-border-color, var(--default-button-border-color, #5b9bd5));
    border-radius: var(--button-border-radius, var(--default-button-border-radius, initial));
    cursor: pointer;
}

.button:hover {
    background-color: var(--button-hover-background-color, var(--default-button-hover-background-color, #243a82));
}

.button-rounded:hover {
    background-color: var(--button-hover-background-color, var(--default-button-hover-background-color, #243a82));
}


.button-circle:hover {
    background-color: var(--button-hover-background-color, var(--default-button-hover-background-color, #243a82));
}

.button-pianokey:hover {
    background-color: var(--button-hover-background-color, var(--default-button-hover-background-color, #243a82));
}

.button-leaf:hover {
    background-color: var(--button-hover-background-color, var(--default-button-hover-background-color, #243a82));
}

/* button swap */

.button-swap {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    line-height: normal;
    white-space: nowrap;
    -webkit-transition: background-color 300ms ease-out;
    -moz-transition: background-color 300ms ease-out;
    transition: background-color 300ms ease-out;
    cursor: pointer;
}

.button-swap.option--buttonize {
    padding: 0.25em;
    font-family: "Montserrat", Arial, serif;
    font-weight: 700;
    font-size: 2em;
    background-color: var(--button-background-color, var(--default-button-background-color, #0089cf));
    color: var(--button-color, var(--default-button-color, #ffffff));
    border-style: solid;
    border-width: 0px;
    border-color: var(--button-border-color, var(--default-button-border-color, #5b9bd5));
    border-radius: 0.25em;
    -webkit-appearance: none;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.button-swap.option--buttonize:hover {
    background-color: var(--button-hover-background-color, var(--default-button-hover-background-color, #243a82));
}

.button-swap > div,
.button-swap > span,
.button-swap > a,
.button-swap > p,
.button-swap > li {
    display: none;
}

.button-swap > *.selected {
    display: block;
}

/* compound buttons */

.toggle-basic {
    display: inline-block;
    width: 2em;
    box-sizing: border-box;
}

.toggle-basic-track {
    display: inline-block;
    width: 100%;
    height: 0.7em;
    background-color:#aaa;
    border-radius: 1em;
    -moz-box-shadow: inset 0 1.5px 2px #777;
    -webkit-box-shadow: inset 0 1.5px 2px #777;
    box-shadow: inset 0 1.5px 2px #777;
}

.toggle-basic-button {
    display: block;
    position: relative;
    z-index: 1;
    top: calc(50% - 0.5em);
    left: 0%;
    width: 1em;
    height: 1em;
    background-color: #fff;
    border-radius: 5em;
    -webkit-transition: left 300ms ease-out;
    -moz-transition: left 300ms ease-out;
    transition: left 300ms ease-out;
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.toggle-basic.state-on > .toggle-basic-track > .toggle-basic-button {
    left: calc(75% - 0.5em);
}


.toggle-inset {
    display: inline-block;
    width: 2em;
    box-sizing: border-box;
}

.toggle-inset-track {
    display: inline-block;
    width: 100%;
    height: 1.125em;
    background-color:#aaa;
    border-radius: 1.25em;
    -moz-box-shadow: inset 0 1.5px 2px #777;
    -webkit-box-shadow: inset 0 1.5px 2px #777;
    box-shadow: inset 0 1.5px 2px #777;
}

.toggle-inset-button {
    display: block;
    position: relative;
    z-index: 1;
    top: calc(50% - 0.5em);
    left: 0%;
    width: 1em;
    height: 1em;
    background-color: #fff;
    border-radius: 5em;
    -webkit-transition: left 300ms ease-out;
    -moz-transition: left 300ms ease-out;
    transition: left 300ms ease-out;
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.toggle-inset.state-on > .toggle-inset-track > .toggle-inset-button {
    left: calc(75% - 0.5em);
}