@import "../../style/color.pcss";
@import "../../style/theme.pcss";
@import "../../style/border.pcss";
@import "../../style/form.pcss";
@import "../../style/control.pcss";
@import "../../style/badge.pcss";
@import '../../style/mixin/typography.pcss';

.monster-field-layout {
    container-type: inline-size;
    container-name: field-layout;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 0.8rem;
    accent-color: var(--monster-color-secondary-2);
    --monster-field-set-h1-size: xx-large;
    --monster-field-set-h2-size: x-large;
    --monster-field-set-h3-size: large;
    --monster-field-set-h4-size: medium;
    --monster-field-set-h5-size: small;
    --monster-field-set-h6-size: smaller;
    --monster-field-set-heading-margin-top: 1rem;
    --monster-field-set-heading-margin-top-first: 0.3rem;
    --monster-field-set-heading-margin-top-1200: 2.2rem;
    --monster-field-set-heading-margin-top-first-1200: 0.6rem;
    --monster-field-set-heading-margin-top-900: 1.8rem;
    --monster-field-set-heading-margin-top-first-900: 0.5rem;
    --monster-field-set-heading-margin-top-500: 1.3rem;
    --monster-field-set-heading-margin-top-first-500: 0.4rem;
    @mixin text;
}

.monster-field-layout.multiple-columns {
    grid-template-columns: auto 1fr auto 1fr auto 1fr;
}

.monster-field-layout > label,
.monster-field-layout > .label {
    color: var(--monster-color-primary-1);
    border-bottom: thin dotted var(--monster-color-primary-1);
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    justify-content: space-between;
}

.monster-field-layout > hr,
.monster-field-layout > h1,
.monster-field-layout > h2,
.monster-field-layout > h3,
.monster-field-layout > h4,
.monster-field-layout > h5,
.monster-field-layout > h6 {
    grid-column: 1 / -1;
    margin: var(--monster-field-set-heading-margin-top, 1rem) 0 0.1rem;
}

.monster-field-layout > h1 {
    font-size: var(--monster-field-set-h1-size, xx-large);
}

.monster-field-layout > h2 {
    font-size: var(--monster-field-set-h2-size, x-large);
}

.monster-field-layout > h3 {
    font-size: var(--monster-field-set-h3-size, large);
}

.monster-field-layout > h4 {
    font-size: var(--monster-field-set-h4-size, medium);
}

.monster-field-layout > h5 {
    font-size: var(--monster-field-set-h5-size, small);
}

.monster-field-layout > h6 {
    font-size: var(--monster-field-set-h6-size, smaller);
}

.monster-field-layout > h1:first-of-type,
.monster-field-layout > h2:first-of-type,
.monster-field-layout > h3:first-of-type,
.monster-field-layout > h4:first-of-type,
.monster-field-layout > h5:first-of-type {
    margin-top: var(--monster-field-set-heading-margin-top-first, 0.3rem);
}

.monster-field-layout > hr {
    border: none;
    border-top: thin dotted var(--monster-color-gray-3);
    margin: 1rem 0;
    padding: 0;
}

.monster-field-layout > hr.delimiter {
    border: none;
    margin: 0;
    padding: 0;
}

.monster-field-layout > .grid-span-full {
    grid-column-end: -1;
}

.monster-field-layout > .grid-start-1 {
    grid-column-start: 1;
}

.monster-field-layout > .grid-start-2 {
    grid-column-start: 2;
}

.monster-field-layout > .grid-start-3 {
    grid-column-start: 3;
}

.monster-field-layout > .grid-start-4 {
    grid-column-start: 4;
}

.monster-field-layout > .grid-double-span {
    grid-column: span 3;
}

.monster-field-layout > .grid-to-end {
    grid-column-end: -1;
}

.monster-field-layout > input[type="text"],
.monster-field-layout > input[type="password"],
.monster-field-layout > input[type="email"],
.monster-field-layout > input[type="number"],
.monster-field-layout > input[type="tel"] {
    height: -webkit-fill-available;
}

.monster-field-layout > input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    border-radius: var(--monster-theme-control-border-radius);
    border-width: var(--monster-theme-control-border-width);
    border-color: var(--monster-theme-control-border-color);
    border-style: var(--monster-theme-control-border-style);
}

.monster-field-layout > select {
    width: 100%;
    border-radius: var(--monster-theme-control-border-radius);
    border-width: var(--monster-theme-control-border-width);
    border-color: var(--monster-theme-control-border-color);
    border-style: var(--monster-theme-control-border-style);
    background-color: var(--monster-bg-color-primary-1);
    color: var(--monster-color-primary-1);
}

.monster-field-layout > select[readonly],
.monster-field-layout > select:disabled {
    background-color: var(--monster-bg-color-primary-2);
    color: var(--monster-color-primary-2);
    cursor: default;
}

.monster-field-layout > input:not([type="checkbox"]):not([type="radio"])[readonly] {
    background-color: var(--monster-bg-color-primary-3);
    color: var(--monster-color-primary-3);
}

.monster-field-layout > input[readonly]:not([type="checkbox"]):not([type="radio"]) {
    background-color: var(--monster-bg-color-primary-2);
    color: var(--monster-color-primary-2);
    cursor: default;
}

.monster-field-layout > input,
.monster-field-layout > monster-toggle-switch,
.monster-field-layout > monster-choice-cards,
.monster-field-layout > select {
    min-height: 1.8rem;
    padding: 0.5rem;
    box-sizing: border-box;
}

.monster-field-layout > monster-password {
    min-height: 1.8rem;
}

.monster-field-layout > input[type="color"] {
    padding: 0 0.2rem;
    min-height: calc(1.8rem + 0.4rem);
    width: 100%;
}

.monster-field-layout > input[type="time"],
.monster-field-layout > input[type="date"] {
    padding: 0 0.2rem;
    min-height: calc(1.8rem + 0.4rem);
}

.monster-field-layout > input[type="checkbox"],
.monster-field-layout > input[type="radio"] {
    width: 1.8rem;
    min-height: calc(1.8rem + 0.4rem);
    padding: 0 0.2rem;
}

.monster-field-layout > input[type="file"] {
    padding: 0.4rem;
    min-height: calc(1.2rem);
}

.monster-field-layout > input,
.monster-field-layout > monster-toggle-switch,
.monster-field-layout > monster-choice-cards,
.monster-field-layout > monster-password,
.monster-field-layout > select,
.monster-field-layout > [data-monster-validation-wrapper] {
    align-self: end;
}

.monster-field-layout > select[multiple],
.monster-field-layout > select[size]:not([size="1"]) {
    min-height: calc(1.8rem * 4);
    padding: 0.25rem 0.35rem;
    align-self: stretch;
    overflow-y: auto;
}

.monster-field-layout > select[multiple] option,
.monster-field-layout > select[size]:not([size="1"]) option {
    padding-block: 0.15rem;
}

.monster-field-layout > monster-toggle-switch {
    width: 3rem;
    padding: 0;
}

.monster-field-layout > monster-choice-cards {
    align-self: stretch;
    padding: 0;
}

@container field-layout (max-width: 1200px) {
    .monster-field-layout.multiple-columns {
        grid-template-columns: auto 1fr auto 1fr;
    }

    .monster-field-layout > h1,
    .monster-field-layout > h2,
    .monster-field-layout > h3,
    .monster-field-layout > h4,
    .monster-field-layout > h5,
    .monster-field-layout > h6 {
        margin: var(--monster-field-set-heading-margin-top-1200, 2.2rem) 0 0.1rem;
    }

    .monster-field-layout > h1:first-of-type,
    .monster-field-layout > h2:first-of-type,
    .monster-field-layout > h3:first-of-type,
    .monster-field-layout > h4:first-of-type,
    .monster-field-layout > h5:first-of-type {
        margin-top: var(--monster-field-set-heading-margin-top-first-1200, 0.6rem);
    }

    .monster-field-layout > .grid-double-span {
        grid-column: span 1;
    }
}

@container field-layout (max-width: 900px) {
    .monster-field-layout.multiple-columns {
        grid-template-columns: auto 1fr;
    }

    .monster-field-layout > h1,
    .monster-field-layout > h2,
    .monster-field-layout > h3,
    .monster-field-layout > h4,
    .monster-field-layout > h5,
    .monster-field-layout > h6 {
        margin: var(--monster-field-set-heading-margin-top-900, 1.8rem) 0 0.1rem;
    }

    .monster-field-layout > h1:first-of-type,
    .monster-field-layout > h2:first-of-type,
    .monster-field-layout > h3:first-of-type,
    .monster-field-layout > h4:first-of-type,
    .monster-field-layout > h5:first-of-type {
        margin-top: var(--monster-field-set-heading-margin-top-first-900, 0.5rem);
    }

    .monster-field-layout > .grid-double-span {
        grid-column: span 1;
    }
}

@container field-layout (max-width: 500px) {
    .monster-field-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .monster-field-layout > h1,
    .monster-field-layout > h2,
    .monster-field-layout > h3,
    .monster-field-layout > h4,
    .monster-field-layout > h5,
    .monster-field-layout > h6 {
        grid-column: 1;
        margin: var(--monster-field-set-heading-margin-top-500, 1.3rem) 0 0.1rem;
    }

    .monster-field-layout > h1:first-of-type,
    .monster-field-layout > h2:first-of-type,
    .monster-field-layout > h3:first-of-type,
    .monster-field-layout > h4:first-of-type,
    .monster-field-layout > h5:first-of-type {
        margin-top: var(--monster-field-set-heading-margin-top-first-500, 0.4rem);
    }

    .monster-field-layout > div.wrapper,
    .monster-field-layout > input,
    .monster-field-layout > monster-toggle-switch,
    .monster-field-layout > monster-choice-cards,
    .monster-field-layout > monster-password,
    .monster-field-layout > textarea,
    .monster-field-layout > select,
    .monster-field-layout > monster-button,
    .monster-field-layout > monster-action-button,
    .monster-field-layout > monster-state-button,
    .monster-field-layout > monster-api-button,
    .monster-field-layout > monster-datasource-save-button {
        grid-column: 1;
    }

    .monster-field-layout > label,
    .monster-field-layout > .label {
        padding-top: 1rem;
        border-bottom: none;
    }

    .monster-field-layout.multiple-columns {
        grid-template-columns: 1fr;
    }

    .monster-field-layout > .grid-start-1,
    .monster-field-layout > .grid-start-2,
    .monster-field-layout > .grid-start-3,
    .monster-field-layout > .grid-start-4,
    .monster-field-layout > .grid-span-full {
        grid-column: 1 !important;
    }

    .monster-field-layout > .grid-double-span {
        grid-column: span 1 !important;
    }
}