@import "../../style/display.pcss";
@import "../../style/color.pcss";
@import "../../style/theme.pcss";
@import "../../style/typography.pcss";
@import "../../style/space.pcss";
@import "../../style/form.pcss";

:host {
    display: block;
    box-sizing: border-box;
}

[data-monster-role=control] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--monster-space-4);
}

[data-monster-role=body] {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: var(--monster-space-5);
    align-items: start;
}

@media (max-width: 720px) {
    [data-monster-role=body] {
        grid-template-columns: minmax(0, 1fr);
    }
}

[data-monster-role=nav] {
    display: block;
}

[data-monster-role=content] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--monster-space-4);
}

[data-monster-role=panel] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--monster-space-3);
    padding: var(--monster-space-4);
    background-color: var(--monster-bg-color-primary-1);
    color: var(--monster-color-primary-1);
    border-radius: var(--monster-border-radius);
    border: var(--monster-theme-control-border-width) var(--monster-theme-control-border-style) var(--monster-theme-control-border-color);
}

[data-monster-role=panel][hidden] {
    display: none;
}

[data-monster-role=form] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--monster-space-2);
}

[data-monster-role=field-label] {
    font-weight: 600;
}

[data-monster-role=availability-message],
[data-monster-role=step-message] {
    display: block;
    background-color: var(--monster-bg-color-primary-1);
    color: var(--monster-color-primary-1);
    padding: 0.3rem 0.5rem;
}

[data-monster-role=actions] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--monster-space-2);
    align-items: center;
    justify-content: center;
}

[data-monster-role=consents-title] {
    font-weight: 600;
}

[data-monster-role=consents-list] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--monster-space-2);
}

[data-monster-role=consent-row] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--monster-space-2);
    align-items: start;
    background-color: var(--monster-bg-color-primary-1);
    color: var(--monster-color-primary-1);
    padding: 0.3rem 0.4rem;
}

[data-monster-role=consent-description] {
    grid-column: 2 / 3;
    font-size: 0.9rem;
    color: var(--monster-color-primary-2);
}

[data-monster-role=footer] {
    display: block;
}