button.theme {
    --color1: var(--app-theme-color);
    --color2: var(--app-black-color);
}

button.theme-reverse {
    --color1: var(--app-black-color);
    --color2: var(--app-theme-color);
}

button.highlight {
    --color1: var(--app-highlight-color);
    --color2: var(--app-black-color);
}

button.highlight-reverse {
    --color1: var(--app-black-color);
    --color2: var(--app-highlight-color);
}

button.highlight2 {
    --color1: var(--app-highlight2-color);
    --color2: var(--app-black-color);
}

button.highlight2-reverse {
    --color1: var(--app-black-color);
    --color2: var(--app-highlight2-color);
}

button.primary {
    --color1: var(--bluecolor);
    --color2: var(--app-black-color);
}

button.primary-reverse {
    --color1: var(--app-black-color);
    --color2: var(--bluecolor);
}


button.neutral {
    --color1: var(--whitesmokecolor);
    --color2: var(--app-black-color);
}

button.neutral-reverse {
    --color1: var(--app-black-color);
    --color2: var(--whitesmokecolor);
}


button.accent {
    --color1: var(--orangecolor);
    --color2: var(--app-black-color);
}

button.accent-reverse {
    --color1: var(--app-black-color);
    --color2: var(--orangecolor);
}


button.success {
    --color1: var(--greencolor);
    --color2: var(--app-black-color);
}

button.success-reverse {
    --color1: var(--app-black-color);
    --color2: var(--greencolor);
}


button.danger {
    --color1: var(--redcolor);
    --color2: var(--app-black-color);
}

button.danger-reverse {
    --color1: var(--app-black-color);
    --color2: var(--redcolor);
}


button:disabled.button-properties {
    --disabled-color: var(--lightgraycolor);
    --disabled-bgcolor: var(--darkgraycolor);
    --disabled-brcolor: var(--darkgraycolor);
}


button.shadow {
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25);
}

button.border {
    border-style: solid;
}

/* #region icon button sizes*/
button.icon-button-xlarge {
    height: 3.25rem;
    width: 3.25rem;
    padding: 0;
    --icon-size: 1.4rem;
}

button.icon-button-large {
    height: 3.0rem;
    width: 3.0rem;
    padding: 0;
    --icon-size: 1.25rem;
}

button.icon-button-medium {
    height: 2.75rem;
    width: 2.75rem;
    padding: 0;
    --icon-size: 1.1rem;
}

button.icon-button-small {
    height: 2.5rem;
    width: 2.5rem;
    padding: 0;
    --icon-size: 1rem;
}

button.icon-button-xsmall {
    height: 2.25rem;
    width: 2.25rem;
    padding: 0;
    --icon-size: 0.9rem;
}

@media (width < 34rem){
    button.icon-button-xlarge {
        height: 3.0rem;
        width: 3.0rem;
        --icon-size: 1.3rem;
    }

    button.icon-button-large {
        height: 2.75rem;
        width: 2.75rem;
        --icon-size: 1.15rem;
    }

    button.icon-button-medium {
        height: 2.5rem;
        width: 2.5rem;
        --icon-size: 1.0rem;
    }

    button.icon-button-small {
        height: 2.25rem;
        width: 2.25rem;
        --icon-size: 0.9rem;
    }

    button.icon-button-xsmall {
        height: 2.0rem;
        width: 2.0rem;
        padding: 0;
        --icon-size: 0.8rem;
    }
}
/*#endregion*/


/*#region text-button*/
button.text-button-xlarge {
    height: 3.25rem;
    width: 100%;
    padding: 0;
    padding-inline: 1.25rem;
    font-size: 1.4rem;
}

button.text-button-large {
    height: 3.0rem;
    width: 100%;
    padding: 0;
    padding-inline: 1rem;
    font-size: 1.25rem;
}

button.text-button-medium {
    height: 2.75rem;
    width: 100%;
    padding: 0;
    padding-inline: 0.75rem;
    font-size: 1.1rem;
}

button.text-button-small {
    height: 2.5rem;
    width: 100%;
    padding: 0;
    padding-inline: 0.5rem;
    font-size: 1rem;
}

button.text-button-xsmall {
    height: 2.25rem;
    width: 100%;
    padding: 0;
    padding-inline: 0.25rem;
    font-size: 0.9rem;
}

@media (width < 34rem) {
    button.text-button-xlarge {
        height: 3.0rem;
        padding-inline: 1rem;
        font-size: 1.3rem;
    }

    button.text-button-large {
        height: 2.75rem;
        padding-inline: 0.75rem;
        font-size: 1.15rem;
    }

    button.text-button-medium {
        height: 2.5rem;
        padding-inline: 0.5rem;
        font-size: 1.0rem;
    }

    button.text-button-small {
        height: 2.25rem;
        padding-inline: 0.25rem;
        font-size: 0.9rem;
    }

    button.text-button-xsmall {
        height: 2.0rem;
        padding-inline: 0.1rem;
        font-size: 0.85rem;
    }
}
/*#endregion*/