@import (optional) url('../variables/panel.variant.less');
.app-panel {
    background-color: var(--wm-panel-background);
    border-radius: var(--wm-panel-radius);
    border-color: var(--wm-panel-border-color);
    border-width: var(--wm-panel-border-width);
    box-shadow: var(--wm-panel-shadow);
    padding: 0;
}

.app-panel-icon .app-icon-text {
    font-size: var(--wm-panel-heading-icon-size);
    color: var(--wm-panel-heading-icon-color);
}

.app-panel-header {
    gap: var(--wm-panel-heading-gap);
    background-color: var(--wm-panel-heading-background);
    padding-inline: var(--wm-panel-heading-padding-inline);
    padding-block: var(--wm-panel-heading-padding-block);
}

.app-panel-title {
    color: var(--wm-panel-heading-text-color);
    font-family: var(--wm-panel-heading-font-family);
    font-size: var(--wm-panel-heading-font-size);
    font-weight: var(--wm-panel-heading-font-weight);
    letter-spacing: var(--wm-panel-heading-letter-spacing);
    line-height: var(--wm-panel-heading-line-height);
}

.app-panel-sub-title {
    font-family: var(--wm-panel-description-font-family);
    font-size: var(--wm-panel-description-font-size);
    font-weight: var(--wm-panel-description-font-weight);
    letter-spacing: var(--wm-panel-description-letter-spacing);
    line-height: var(--wm-panel-description-line-height);
    color: var(--wm-panel-description-color);
}

//TODO: Remove below styles once rn style override issue is fixed
.panel-default.app-panel-header {
    background-color: var(--wm-panel-heading-background);
}

.panel-default.app-panel-title {
    color: var(--wm-panel-heading-text-color);
}

.panel-default.app-panel-sub-title {
    color: var(--wm-panel-description-color);
}

.panel-default.app-panel-icon .app-icon-text {
    color: var(--wm-panel-heading-icon-color);
}

.panel-danger.app-panel-header {
    background-color: var(--wm-panel-heading-background);
}

.panel-danger.app-panel-title {
    color: var(--wm-panel-heading-text-color);
}

.panel-danger.app-panel-sub-title {
    color: var(--wm-panel-description-color);
}

.panel-danger.app-panel-icon .app-icon-text {
    color: var(--wm-panel-heading-icon-color);
}

.panel-success.app-panel-header {
    background-color: var(--wm-panel-heading-background);
}

.panel-success.app-panel-title {
    color: var(--wm-panel-heading-text-color);
}

.panel-success.app-panel-sub-title {
    color: var(--wm-panel-description-color);
}

.panel-success.app-panel-icon .app-icon-text {
    color: var(--wm-panel-heading-icon-color);
}

.panel-warning.app-panel-header {
    background-color: var(--wm-panel-heading-background);
}

.panel-warning.app-panel-title {
    color: var(--wm-panel-heading-text-color);
}

.panel-warning.app-panel-sub-title {
    color: var(--wm-panel-description-color);
}

.panel-warning.app-panel-icon .app-icon-text {
    color: var(--wm-panel-heading-icon-color);
}

.panel-info.app-panel-header {
    background-color: var(--wm-panel-heading-background);
}

.panel-info.app-panel-title {
    color: var(--wm-panel-heading-text-color);
}

.panel-info.app-panel-sub-title {
    color: var(--wm-panel-description-color);
}

.panel-info.app-panel-icon .app-icon-text {
    color: var(--wm-panel-heading-icon-color);
}

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

.panel-primary.app-panel-title {
    color: var(--wm-panel-heading-text-color);
}

.panel-primary.app-panel-sub-title {
    color: var(--wm-panel-description-color);
}

.panel-primary.app-panel-icon .app-icon-text {
    color: var(--wm-panel-heading-icon-color);
}

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

.panel-secondary.app-panel-title {
    color: var(--wm-panel-heading-text-color);
}

.panel-secondary.app-panel-sub-title {
    color: var(--wm-panel-description-color);
}

.panel-secondary.app-panel-icon .app-icon-text {
    color: var(--wm-panel-heading-icon-color);
}

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

.panel-tertiary.app-panel-title {
    color: var(--wm-panel-heading-text-color);
}

.panel-tertiary.app-panel-sub-title {
    color: var(--wm-panel-description-color);
}

.panel-tertiary.app-panel-icon .app-icon-text {
    color: var(--wm-panel-heading-icon-color);
}