.form__group {
    display: flex;
    gap: 8px;

    > .field {
        flex: 1 0;
        margin: 0;
    }
}

.form__actions {
    display: flex;
    gap: 8px;
    justify-content: space-between;

    > * {
        flex: 0 0 min-content;
    }
}

.field {
    --icon-size: 20px;
    margin-bottom: 12px;

    .icon {
        position: absolute;
        margin: 12px 16px;
    }
}

label {
    display: block;
}

.check {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

input,
select {
    appearance: none;
    background-color: var(--colour-surface-container-lowest);
    border: 1px solid var(--colour-outline);
    border-radius: var(--small-radius);
    box-sizing: border-box;
    color: var(--colour-on-surface);
    font: var(--body-large);
    height: calc(2 * 1px + 2 * 8px + 1lh);
    padding: 8px 16px;
    width: 100%;

    label + &,
    label & {
        margin-top: 4px;
    }

    &::placeholder {
        color: var(--colour-on-surface-variant);
    }

    &::-webkit-date-and-time-value {
        text-align: start;
    }

    &[type="checkbox"],
    &[type="radio"] {
        appearance: none;
        flex-shrink: 0;
        height: 1em;
        margin: 0;
        padding: 0;
        width: 1em;

        &:checked {
            background-color: var(--colour-primary);
            background-position: center;
            background-repeat: no-repeat;
            border-color: var(--colour-primary);
            color: var(--colour-on-primary);
        }
    }

    &[type="checkbox"] {
        border-radius: 4px;

        &:checked {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='oklch(1 0 286.95)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l5 5l10 -10' /%3E%3C/svg%3E");
            background-size: 0.75em;

            @media (prefers-color-scheme: dark) {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='oklch(0.2 0.112 286.95)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l5 5l10 -10' /%3E%3C/svg%3E");
            }
        }
    }

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

        &:checked {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='oklch(1 0 286.95)'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 3.34a10 10 0 1 1 -4.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 4.995 -8.336z' /%3E%3C/svg%3E");
            background-size: 0.625em;

            @media (prefers-color-scheme: dark) {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='oklch(0.2 0.112 286.95)'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M7 3.34a10 10 0 1 1 -4.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 4.995 -8.336z' /%3E%3C/svg%3E");
            }
        }
    }

    &[type="search"] {
        background-color: var(--colour-surface-container-high);
        border: none;
        border-radius: 24px;
        padding-left: 48px;
    }

    &:disabled {
        border-color: var(--colour-on-surface);
        opacity: 0.38;

        & ~ label {
            opacity: 0.38;
        }
    }

    &[readonly] {
        background: none;
        border: none;
        border-radius: 0;
        outline: none;
        padding: 0;
    }

    &.is-invalid {
        border-color: var(--colour-error);
    }
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='oklch(0.1 0.0012 286.95)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 9l6 6l6 -6' /%3E%3C/svg%3E");
    background-position: right 0.75em center;
    background-repeat: no-repeat;
    background-size: 1em;

    @media (prefers-color-scheme: dark) {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='oklch(0.9 0.0012 286.95)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M6 9l6 6l6 -6' /%3E%3C/svg%3E");
    }
}

fieldset {
    border: none;
    margin: 0 0 12px;
    padding: 0;
}

.field__group {
    align-items: baseline;
    display: flex;
    gap: 12px;
    margin-top: 4px;

    input {
        flex: 1;
    }

    .field__suffix {
        color: var(--colour-on-surface-variant);
        flex-shrink: 0;
    }
}

.help-text,
.error {
    font: var(--body-medium);
    margin: 4px 0 0;
}

.help-text {
    color: var(--colour-on-surface-variant);
}

.error {
    color: var(--colour-error);
}