.field {
    label {
        display: block;
        margin-block-end: .25em;
        font-weight: 500;
        font-size: 1rem;
    }

    input,
    textarea,
    select {
        display: block;
        width: 100%;
        min-height: 3em;
        padding: .5em .75em;
        font-weight: 300;
        font-size: 1rem;
        color: hsl(var(--black-h), var(--black-s), 40%);
        border-width: 1px;
        border-style: solid;
        border-color: hsl(var(--black-h), var(--black-s), 75%);
        border-radius: .25em;

        &:hover,
        &:active {
            color: var(--black);
        }
    }

    select {
        option {
            font-family: 'Roboto Condensed', Arial, sans-serif;
            font-size: .875rem;
        }
    }

    input[type="radio"],
    input[type="checkbox"] {
        display: inline-block;
        padding: 0;
        width: 1em;
        height: 1em;
        min-height: unset;

        &:checked {
            background-color: var(--primary);
        }
    }

    input[type="radio"] {
        border-radius: 50%;
    }

    &:has(> input[type="radio"]),
    &:has(> input[type="checkbox"]) {
        display: flex;
        align-items: center;

        label {
            display: inline-block;
            margin-block-end: 0;
            margin-inline-start: .25em;
        }
    }

    & > [data-multiple] {  
        .field__main,
        .field__copy {
            display: flex;
            align-items: stretch;
            margin-block-start: .5rem;
            gap: .5rem;

            button {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: .5em;
                aspect-ratio: 1;
                color: var(--error);
                border-radius: .25em;
                background-color: hsl(var(--error-h), var(--error-s), 95%);
                border: 1px solid hsl(var(--error-h), var(--error-s), 75%);
            }
        }
        
        .field__main {   
            button {
                opacity: .25;
                cursor: not-allowed
            }
        }
    }

    &.field--with-button {
        display: flex;
        align-items: stretch;
    
        input,
        textarea,
        select {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        button {
            font-size: .875rem;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }

    &.field--draggable {
        display: flex;
        align-items: stretch;
        gap: .5rem;

        span {
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            aspect-ratio: 1;
            font-size: 1.25rem;
            border-radius: .25rem;
            background-color: hsl(var(--white-h), var(--white-s), 95%);
            cursor: move;
        }
    }
}

.actions {
    display: flex;
    gap: 1rem; /* Var */
    margin-block-start: 1rem; /* Var */
    padding-block-start: 1rem; /* Var */
    border-block-start: 1px solid hsl(var(--white-h), var(--white-s), 95%);
}












.sortablejs {
    li {
        padding: .5rem;
        border-radius: .5rem;
        border-width: 1px;
        border-style: solid;
        border-color: hsl(var(--white-h), var(--white-s), 90%);
        background-color: transparent;
        transition: background-color .25s;

        &:hover:not(:has(li:hover)) {
            background-color: hsl(var(--white-h), var(--white-s), 95%);
        }

        &:not(:first-child) {
            margin-block-start: 1rem;
        }
    }

    ul {
        margin-block-start: 1rem;

        li {
            margin-block-start: .25rem;
            border-color: hsl(var(--white-h), var(--white-s), 95%);
        }
    }
}

[data-process-role="wrapper"] {
    margin-block-start: 1rem;
}



.field {
    [data-upload] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .25rem;
        width: 100%;
        min-height: 3em;
        margin-block-end: 0;
        padding: .5em .75em;
        font-weight: 300;
        font-size: 1rem;
        color: hsl(var(--black-h), var(--black-s), 40%);
        border-width: 1px;
        border-style: solid;
        border-color: hsl(var(--black-h), var(--black-s), 75%);
        border-radius: .25em;
    
        label {
            margin-block-end: 0;
            font-weight: 300;

            span {
                cursor: pointer;
            }
        }
    
        input[type="file"] {
            display: none;
        }

        input[type="checkbox"] {
            margin-inline-start: auto;
        }

        &:hover,
        &:active {
            color: var(--black);
        }
    }
}


.field__dropdown {
    position: relative;
    width: 100%;

    div {
        z-index: 1;
        position: absolute;
        top: calc(100% + .25em);
        left: -1rem;
        display: none;
        min-width: calc(100% + 2 * 1rem);
        max-height: 75vh;
        padding: 1rem;
        border-radius: .25rem;
        background-color: var(--white);
        box-shadow: 0 .5rem 1rem -.5rem rgba(0, 0, 0, 0.1);

        ul {
            margin: .5em 0 0 0;
            padding: 0;
            list-style: none;
            max-height: calc(3cap * 10);
            background-color: transparent;
            scroll-snap-type: y mandatory;
            overflow-y: auto;

            li {
                line-height: 3cap;
                color: hsl(var(--black-h), var(--black-s), 40%);
                user-select: none;
                scroll-snap-align: start;
                transition: color .25s;

                &:hover {
                    color: hsl(var(--black-h), var(--black-s), 0%);
                }
            }
        }
    }
}