/*#region Select */
select.c-select {
    appearance: base-select;
    display: grid;
    grid-template-columns: 1fr max-content;
    align-items: center;
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    font-size: var(--font-md);
    background-color: transparent;
    color: inherit;
    border: none;
    cursor: pointer;
    min-height: auto;
    /* toggle icon */
    &::picker-icon {
        color: var(--color-primary-emphasis);
        transition: rotate 0.2s;
    }

    &:open::picker-icon {
        rotate: 180deg;
    }
    /* picker - popup */
    &::picker(select) {
        appearance: base-select;
        margin-block-start: var(--space-xs);
        background-color: var(--color-picker);
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-md);
        color: var(--color-text);
        box-shadow: var(--shadow-lg);
    }

    &[disabled] {
        cursor: default;
    }

    &[disabled]::picker-icon {
        display: none;
    }
    /* option */
    option {
        padding-block: var(--space-sm);
        padding-inline: var(--space-md);
        background-color: var(--color-picker);
        color: var(--color-text);
        transition: background-color 0.2s ease;

        &:hover {
            background-color: var(--color-control-hover);
        }

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

        &:disabled {
            color: var(--color-text-muted);
        }

        &::checkmark {
            color: var(--color-primary-emphasis);
        }
    }
}
/*#endregion Select */

/*#region CheckBox */
input[type=checkbox].c-checkbox {
    appearance: none;
    zoom: 1.5;
    display: grid;
    place-content: center;
    inline-size: var(--size-md);
    block-size: var(--size-md);
    font-size: var(--font-md);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-xs);
    background-color: var(--color-control);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;

    &::after {
        content: "✓";
        color: var(--color-primary-text);
        font-size: 0.75em;
        font-weight: var(--font-bold);
        line-height: 1;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

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

        &:checked::after {
            opacity: 1;
        }

    &:focus-visible {
        outline: 2px solid var(--color-primary-soft);
        outline-offset: 2px;
    }
}
/*#endregion CheckBox */

:is(input, select, textarea) {
    background-color: transparent;
    color: inherit;
    border: none;

    &:focus {
        outline: none;
    }

    &::placeholder {
        color: var(--color-text-muted);
        opacity: 1;
    }
}

textarea {
    resize: vertical;
}