@import url('../../variables.less');


/**********************************************************************************
To style the outermost wrapper element of button widget.
***********************************************************************************/
.app-button {
}


/**********************************************************************************
To style the caption text of button widget.
***********************************************************************************/
.app-button-text {
}


/**********************************************************************************
To style the content wrapper element of button widget.
***********************************************************************************/
.app-button-content {
}


/**********************************************************************************
To style the badge of button widget.
***********************************************************************************/
.app-button-badge {
    background-color: @buttonBadgeBackgroundColor;
    color: @buttonBadgeTextColor;
    border-color: @buttonBadgeTextColor;
}


/**********************************************************************************
To style the icon of button widget.
***********************************************************************************/
.app-button-icon {
}


/**********************************************************************************
To style the skeleton of button widget.
***********************************************************************************/
.app-button-skeleton {
}


.app-button-disabled-root {
}


.app-icon-icon {
}


.btn-default.app-button {
    border-color: @buttonBorderColor;
    background-color: @buttonDefaultColor;
}


.btn-default.app-button-text {
    color: @buttonDefaultTextColor;
}


.btn-default.app-button-badge {
    background-color: @buttonDefaultTextColor;
    color: @buttonDefaultColor;
    border-color: @buttonDefaultColor;
}


.btn-default.app-button-icon .app-icon {
    color: @buttonDefaultTextColor;
}


.btn-info.app-button {
    border-color: @buttonInfoColor;
    background-color: @buttonInfoColor;
}


.btn-info.app-button-text {
    color: @buttonInfoTextColor;
}


.btn-info.app-button-badge {
    background-color: @buttonInfoTextColor;
    color: @buttonInfoColor;
    border-color: @buttonInfoColor;
}


.btn-info.app-button-icon .app-icon {
    color: @buttonInfoTextColor;
}


.btn-primary.app-button {
    border-color: @buttonPrimaryColor;
    background-color: @buttonPrimaryColor;
}


.btn-primary.app-button-text {
    color: @buttonPrimaryTextColor;
}


.btn-primary.app-button-badge {
    background-color: @buttonPrimaryTextColor;
    color: @buttonPrimaryColor;
    border-color: @buttonPrimaryColor;
}


.btn-primary.app-button-icon .app-icon {
    color: @buttonPrimaryTextColor;
}


.btn-secondary.app-button {
    border-color: @buttonSecondaryTextColor;
    background-color: @buttonSecondaryColor;
}


.btn-secondary.app-button-text {
    color: @buttonSecondaryTextColor;
}


.btn-secondary.app-button-badge {
    background-color: @buttonSecondaryTextColor;
    color: @buttonSecondaryColor;
    border-color: @buttonSecondaryColor;
}


.btn-secondary.app-button-icon .app-icon {
    color: @buttonSecondaryTextColor;
}


.btn-danger.app-button {
    border-color: @buttonDangerColor;
    background-color: @buttonDangerColor;
}


.btn-danger.app-button-text {
    color: @buttonDangerTextColor;
}


.btn-danger.app-button-badge {
    background-color: @buttonDangerTextColor;
    color: @buttonDangerColor;
    border-color: @buttonDangerColor;
}


.btn-danger.app-button-icon .app-icon {
    color: @buttonDangerTextColor;
}


.btn-success.app-button {
    border-color: @buttonSuccessColor;
    background-color: @buttonSuccessColor;
}


.btn-success.app-button-text {
    color: @buttonSuccessTextColor;
}


.btn-success.app-button-badge {
    background-color: @buttonSuccessTextColor;
    color: @buttonSuccessColor;
    border-color: @buttonSuccessColor;
}


.btn-success.app-button-icon .app-icon {
    color: @buttonSuccessTextColor;
}


.btn-warning.app-button {
    border-color: @buttonWarningColor;
    background-color: @buttonWarningColor;
}


.btn-warning.app-button-text {
    color: @buttonWarningTextColor;
}


.btn-warning.app-button-badge {
    background-color: @buttonWarningTextColor;
    color: @buttonWarningColor;
    border-color: @buttonWarningColor;
}


.btn-warning.app-button-icon .app-icon {
    color: @buttonWarningTextColor;
}


.btn-link.app-button {
    border-color: @buttonLinkColor;
    background-color: @buttonLinkColor;
}


.btn-link.app-button-text {
    color: @buttonLinkTextColor;
}


.btn-link.app-button-badge {
    background-color: @buttonLinkTextColor;
    color: @buttonLinkColor;
    border-color: @buttonLinkColor;
}


.btn-link.app-button-icon .app-icon {
    color: @buttonLinkTextColor;
}


.btn-dark.app-button {
    border-color: @buttonDarkColor;
    background-color: @buttonDarkColor;
}


.btn-dark.app-button-text {
    color: @buttonDarkTextColor;
}


.btn-dark.app-button-badge {
    background-color: @buttonDarkTextColor;
    color: @buttonDarkColor;
    border-color: @buttonDarkColor;
}


.btn-dark.app-button-icon .app-icon {
    color: @buttonDarkTextColor;
}


.btn-light.app-button {
    border-color: @buttonLightColor;
    background-color: @buttonLightColor;
}


.btn-light.app-button-text {
    color: @buttonLightTextColor;
}


.btn-light.app-button-badge {
    background-color: @buttonLightTextColor;
    color: @buttonLightColor;
    border-color: @buttonLightColor;
}


.btn-light.app-button-icon .app-icon {
    color: @buttonLightTextColor;
}

@import (optional) url('../../../wavemaker/design-tokens/basic/button.less');
@import (optional) url('../../../custom/components/basic/button.less');
@import (optional) url('../../../custom/os/components/basic/button.less');