@use '../../css/mixin';

.layerPane {
    composes: basePaneStructure from './base/Pane.module.scss';

    display: flex;
    flex-flow: column;
    contain: paint;
    transition: 210ms var(--swift-out);
    transition-property: background, border;
}

.layerPaneGray {
    composes: layerPane;

    background-color: var(--gray-50);
    border-color: var(--surface-stroke-out);

    &:has(> .paneHeaderClickable:hover) {
        background-color: var(--gray-100);
        border-color: var(--surface-stroke-out-hover);
    }
}

.layerPanePrimary {
    composes: layerPane;

    background-color: var(--primary-100);
    border-color: var(--primary-200);

    &:has(> .paneHeaderClickable:hover) {
        background-color: var(--primary-200);
        border-color: var(--primary-300);
    }
}

.layerPaneDanger {
    composes: layerPane;

    background-color: var(--danger-100);
    border-color: var(--danger-200);

    &:has(> .paneHeaderClickable:hover) {
        background-color: var(--danger-200);
        border-color: var(--danger-300);
    }

    :local(.paneHeaderIcon) {
        color: var(--danger-600);
    }
}

.layerPaneInfo {
    composes: layerPane;

    background-color: var(--info-100);
    border-color: var(--info-200);

    &:has(> .paneHeaderClickable:hover) {
        background-color: var(--info-200);
        border-color: var(--info-300);
    }

    :local(.paneHeaderIcon) {
        color: var(--info-600);
    }
}

.layerPaneSuccess {
    composes: layerPane;

    background-color: var(--success-100);
    border-color: var(--success-200);

    &:has(> .paneHeaderClickable:hover) {
        background-color: var(--success-200);
        border-color: var(--success-300);
    }

    :local(.paneHeaderIcon) {
        color: var(--success-600);
    }
}

.layerPaneWarning {
    composes: layerPane;

    background-color: var(--warning-100);
    border-color: var(--warning-200);

    &:has(> .paneHeaderClickable:hover) {
        background-color: var(--warning-200);
        border-color: var(--warning-300);
    }

    :local(.paneHeaderIcon) {
        color: var(--warning-600);
    }
}

.layerPane > .basePaneStructure {
    margin-left: -1px;
    margin-right: -1px;
}

.layerPane > .basePaneStructure:first-child {
    margin-top: -1px;
}

.layerPane > .basePaneStructure:last-child {
    margin-bottom: -1px;
}

.layerPane > .basePaneStructure + .basePaneStructure {
    border-top-width: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.layerPane > .basePaneStructure:has(+ .basePaneStructure) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.layerPane > .paneFooter {
    background: unset;
    border: 0;
}

.layerPane > .paneHeader {
    background: unset;
}

.layerPane > .paneHeader > :is(.button, .buttonGroup) {
    margin: -9px -9px -9px 0;
}