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


/**********************************************************************************
To style the outermost wrapper element of panel widget.
***********************************************************************************/
.app-panel {
    background-color: @panelBgColor;
}


/**********************************************************************************
To style the title of panel widget.
***********************************************************************************/
.app-panel-title {
    color: @panelHeaderTextColor;
}


/**********************************************************************************
To style the header of panel widget.
***********************************************************************************/
.app-panel-header {
    background-color: @panelHeaderBgColor;
    border-color: @panelHeaderBgColor;
}


/**********************************************************************************
To style the subtitle of panel widget.
***********************************************************************************/
.app-panel-sub-title {
}


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


/**********************************************************************************
To style the expand/collapse icon of panel widget.
***********************************************************************************/
.app-panel-toggle-icon {
}


/**********************************************************************************
To style the badge of panel widget.
***********************************************************************************/
.app-panel-badge {
    color: @badgeTextColor;
}


/**********************************************************************************
To style the default label
***********************************************************************************/
.app-panel-default-badge {
    background-color: @labelDefaultColor;
    color: @defaultColorF;
}


/**********************************************************************************
To style the danger label
***********************************************************************************/
.app-panel-danger-badge {
    background-color: @labelDangerColor;
    color: @defaultColorF;
}


/**********************************************************************************
To style the success label
***********************************************************************************/
.app-panel-success-badge {
    background-color: @labelSuccessColor;
    color: @defaultColorF;
}


/**********************************************************************************
To style the warning label
***********************************************************************************/
.app-panel-warning-badge {
    background-color: @labelWarningColor;
    color: @defaultColorF;
}


/**********************************************************************************
To style the info label
***********************************************************************************/
.app-panel-info-badge {
    background-color: @labelInfoColor;
    color: @defaultColorF;
}


.app-panel-primary-badge {
    background-color: @labelPrimaryColor;
    color: @defaultColorF;
}


.panel-default.app-panel-header {
    background-color: @panelDefaultColor;
}


.panel-default.app-panel-title {
    color: @panelTextColor;
}


.panel-default.app-panel-sub-title {
    color: @panelTextColor;
}


.panel-default.app-panel-icon .app-icon-text {
    color: @panelTextColor;
}


.panel-danger.app-panel-header {
    background-color: @panelDangerColor;
}


.panel-danger.app-panel-title {
    color: @panelTextColor;
}


.panel-danger.app-panel-sub-title {
    color: @panelTextColor;
}


.panel-danger.app-panel-icon .app-icon-text {
    color: @panelTextColor;
}


.panel-success.app-panel-header {
    background-color: @panelSuccessColor;
}


.panel-success.app-panel-title {
    color: @panelTextColor;
}


.panel-success.app-panel-sub-title {
    color: @panelTextColor;
}


.panel-success.app-panel-icon .app-icon-text {
    color: @panelTextColor;
}


.panel-warning.app-panel-header {
    background-color: @panelWarningColor;
}


.panel-warning.app-panel-title {
    color: @panelTextColor;
}


.panel-warning.app-panel-sub-title {
    color: @panelTextColor;
}


.panel-warning.app-panel-icon .app-icon-text {
    color: @panelTextColor;
}


.panel-info.app-panel-header {
    background-color: @panelInfoColor;
}


.panel-info.app-panel-title {
    color: @panelTextColor;
}


.panel-info.app-panel-sub-title {
    color: @panelTextColor;
}


.panel-info.app-panel-icon .app-icon-text {
    color: @panelTextColor;
}


.panel-primary.app-panel-header {
    background-color: @panelPrimaryColor;
}


.panel-primary.app-panel-title {
    color: @panelTextColor;
}


.panel-primary.app-panel-sub-title {
    color: @panelTextColor;
}


.panel-primary.app-panel-icon .app-icon-text {
    color: @panelTextColor;
}


/**********************************************************************************
To style the danger label
***********************************************************************************/
.app-panel-danger-badge {
    background-color: var(--wm-panel-heading-color-danger);
    color: var(--wm-panel-background-danger);
}


/**********************************************************************************
To style the success label
***********************************************************************************/
.app-panel-success-badge {
    background-color: var(--wm-panel-heading-color-success);
    color: var(--wm-panel-background-success);
}


/**********************************************************************************
To style the warning label
***********************************************************************************/
.app-panel-warning-badge {
    background-color: var(--wm-panel-heading-color-warning);
    color: var(--wm-panel-background-warning);
}


/**********************************************************************************
To style the info label
***********************************************************************************/
.app-panel-info-badge {
    background-color: var(--wm-panel-heading-color-info);
    color: var(--wm-panel-background-info);
}


.app-panel-primary-badge {
    background-color: var(--wm-panel-heading-color-primary);
    color: var(--wm-panel-background-primary);
}


.app-panel-secondary-badge {
    background-color: var(--wm-panel-heading-color-secondary);
    color: var(--wm-panel-background-secondary);
}


.app-panel-tertiary-badge {
    background-color: var(--wm-panel-heading-color-tertiary);
    color: var(--wm-panel-background-tertiary);
}


.panel-danger.app-panel-header {
}


.panel-danger.app-panel-title {
}


.panel-danger.app-panel-sub-title {
}


.panel-danger.app-panel-icon .app-icon-text {
}


.panel-success.app-panel-header {
}


.panel-success.app-panel-title {
}


.panel-success.app-panel-sub-title {
}


.panel-success.app-panel-icon .app-icon-text {
}


.panel-warning.app-panel-header {
}


.panel-warning.app-panel-title {
}


.panel-warning.app-panel-sub-title {
}


.panel-warning.app-panel-icon .app-icon-text {
}


.panel-info.app-panel-header {
}


.panel-info.app-panel-title {
}


.panel-info.app-panel-sub-title {
}


.panel-info.app-panel-icon .app-icon-text {
}


.panel-primary.app-panel-header {
}


.panel-primary.app-panel-title {
}


.panel-primary.app-panel-sub-title {
}


.panel-primary.app-panel-icon .app-icon-text {
}


.panel-secondary.app-panel-header {
}


.panel-secondary.app-panel-title {
}


.panel-secondary.app-panel-sub-title {
}


.panel-secondary.app-panel-icon .app-icon-text {
}


.panel-tertiary.app-panel-header {
}


.panel-tertiary.app-panel-title {
}


.panel-tertiary.app-panel-sub-title {
}


.panel-tertiary.app-panel-icon .app-icon-text {
}

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