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

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

[data-monster-role=control] {
    display: flex;
    flex-direction: column;
    gap: var(--monster-space-4);
}

[data-monster-role=dimensions] {
    display: grid;
    grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr);
    column-gap: var(--monster-space-3);
    row-gap: var(--monster-space-3);
}

[data-monster-role=dimension] {
    display: contents;
}

[data-monster-role=dimension-label] {
    font-size: 0.9rem;
    background-color: var(--monster-bg-color-primary-1);
    color: var(--monster-color-primary-1);
    min-width: 7rem;
    flex: 0 0 auto;
    padding: 0.2rem 0.4rem;
    align-self: center;
}

[data-monster-role=dimension-controls] {
    display: block;
    min-width: 0;
    align-self: center;
}

[data-monster-role=combined-select] {
    width: 100%;
}

[data-monster-role=options] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--monster-space-2);
}

[data-monster-role=options] > button {
    width: auto;
    flex: 0 0 auto;
    display: inline-flex;
}

button.monster-button-outline-primary {
    min-width: 2.8rem;
}

[data-monster-role=message] {
    font-size: 0.85rem;
    color: var(--monster-color-primary-3);
}

.is-selected {
    background-color: var(--monster-bg-color-secondary-3);
    color: var(--monster-color-secondary-3);
}

.is-disabled {
    background-color: var(--monster-bg-color-primary-2);
    color: var(--monster-color-primary-2);
    opacity: 0.6;
}