@import (optional) url('../variables/accordion.variant.less');

.app-accordion {
    width: var(--wm-accordion-width);
    border-width: var(--wm-accordion-border-width);
    border-style: var(--wm-accordion-border-style);
    border-color: var(--wm-accordion-border-color);
    border-radius: var(--wm-accordion-border-radius);
    background-color: var(--wm-accordion-background-color);
    gap: var(--wm-accordion-gap);
}

.app-accordion-text {
    align-self: flex-start;
    border-radius: var(--wm-accordion-text-border-radius);
    border-width: var(--wm-accordion-text-border-width);
    border-color: var(--wm-accordion-text-border-color);
    background-color: var(--wm-accordion-text-background-color);
    color: var(--wm-accordion-text-color);
    font-size: var(--wm-accordion-text-font-size);
}

.app-accordion-header {
    background-color: var(--wm-accordion-header-background-color);
    padding: var(--wm-accordion-header-padding);
    border-width: var(--wm-accordion-header-border-width);
    border-color: var(--wm-accordion-header-border-color);
    border-top-left-radius: var(--wm-accordion-border-radius);
    border-top-right-radius: var(--wm-accordion-border-radius);
    color: var(--wm-accordion-text-color);
}

.app-accordion-active-header {
    background-color: var(--wm-accordion-header-background-color);
    padding: var(--wm-accordion-header-padding);
    border-width: var(--wm-accordion-header-border-width);
    border-color: var(--wm-accordion-header-border-color);
    border-top-left-radius: var(--wm-accordion-border-radius);
    border-top-right-radius: var(--wm-accordion-border-radius);
    color: var(--wm-accordion-text-color);
}

.app-accordion-active-header-title {
    align-self: flex-start;
    border-radius: var(--wm-accordion-text-border-radius);
    border-width: var(--wm-accordion-text-border-width);
    border-color: var(--wm-accordion-text-border-color);
    background-color: var(--wm-accordion-text-background-color);
    color: var(--wm-accordion-text-color);
    font-size: var(--wm-accordion-text-font-size);
}

.app-accordion-header-collapse-icon .app-icon-shape {
    color: var(--wm-accordion-icon-color);
    font-size: var(--wm-accordion-icon-font-size);
    font-weight: var(--wm-accordion-icon-font-weight);
}

.app-accordion-title-icon .app-icon-shape {
    color: var(--wm-accordion-title-icon-color);
    font-size: var(--wm-accordion-title-icon-size);
}

.app-accordion-active-title-icon .app-icon-shape {
    color: var(--wm-accordion-title-icon-color);
}

.app-accordion-active-header-badge {
    font-size: var(--wm-accordion-badge-font-size);
    margin-right: var(--wm-accordion-badge-margin-right);
    width: var(--wm-accordion-badge-width);
    height: var(--wm-accordion-badge-height);
    border-radius: var(--wm-accordion-badge-border-radius);
    border-style: var(--wm-accordion-border-style);
    border-width: var(--wm-accordion-badge-border-width);
    border-color: var(--wm-accordion-badge-border-color);
    color: var(--wm-accordion-badge-color);
    background-color: var(--wm-accordion-badge-background-color);
    align-self: stretch;
}

.app-accordion-header-subtitle {
    font-size: var(--wm-accordion-header-subtitle-font-size);
    margin-top: var(--wm-accordion-header-subtitle-margin-top);
    color: var(--wm-accordion-text-color);
}

.app-accordion-header-expand-icon .app-icon-shape {
    color: var(--wm-accordion-icon-color);
    font-size: var(--wm-accordion-icon-font-size);
    font-weight: var(--wm-accordion-icon-font-weight);
}

.app-accordion-header-badge {
    font-size: var(--wm-accordion-badge-font-size);
    margin-right: var(--wm-accordion-badge-margin-right);
    width: var(--wm-accordion-badge-width);
    height: var(--wm-accordion-badge-height);
    border-radius: var(--wm-accordion-badge-border-radius);
    border-style: var(--wm-accordion-border-style);
    border-width: var(--wm-accordion-badge-border-width);
    border-color: var(--wm-accordion-badge-border-color);
    color: var(--wm-accordion-badge-color);
    background-color: var(--wm-accordion-badge-background-color);
    align-self: stretch;
}

.app-accordion-pane{
    border-style: var(--wm-accordion-pane-border-style);
    border-width: var(--wm-accordion-pane-border-width);
    border-color: var(--wm-accordion-pane-border-color);
    border-radius: var(--wm-accordion-pane-border-radius);
}

.app-accordion-header-danger-badge {
    background-color: var(--wm-color-error);
}

.app-accordion-header-success-badge {
    background-color: var(--wm-color-success);
}

.app-accordion-header-warning-badge {
    background-color: var(--wm-color-warning);
}

.app-accordion-header-info-badge {
    background-color: var(--wm-color-info);
}

.app-accordion-header-primary-badge {
    background-color: var(--wm-color-primary);
}

.app-accordion-header-default-badge{
    background-color: var(--wm-accordion-badge-background-color);
}

.app-accordion-title-wrapper {
    flex: 1;
    flex-direction: row;
    align-items: flex-start;
    width: var(--wm-accordion-title-wrapper-width);
    padding: var(--wm-accordion-title-wrapper-padding);
    border-width: var(--wm-accordion-title-wrapper-border-width);
    border-radius: var(--wm-accordion-title-wrapper-border-radius);
    border-style: var(--wm-accordion-title-wrapper-border-style);
    background-color: var(--wm-accordion-title-wrapper-background-color);

}