input, select, selectedcontent, button, textarea, a { all: unset; }

input[type="search"] {
    &::-webkit-search-cancel-button {
        appearance: none;
        width: var(--font-size-lg);
        height: var(--font-size-lg);
        background: url(/static/images/icons/xmark-dark.svg) no-repeat center / contain;
        cursor: pointer;
    }
}

input[type="file"] {
    cursor: pointer;
    background-image: url(/static/images/icons/upload-dark.svg);
    background-position: right var(--space-md) center;
    background-repeat: no-repeat;
    background-size: var(--font-size-xl) var(--font-size-xl);
}

input[type="password"] {
    :-ms-reveal {
        border: 1px solid transparent;
        border-radius: 50%;
        box-shadow: 0 0 3px currentColor;
        background: center/contain no-repeat url(/static/images/icons/right.svg);
    }
}

input:not([type="checkbox"]), textarea {
    padding: calc(0.5 * var(--space-sm)) var(--space-md);
    color: var(--black);
    &::placeholder { color: var(--dark); }
    &:focus { box-shadow: inset 0 0 0 1px var(--secondary); }
    &:user-valid { box-shadow: inset 0 0 0 1px var(--secondary); }
    &:user-invalid { box-shadow: inset 0 0 0 1px var(--error); }
    &.borderless { border: none; box-shadow: none; }
}

.input-field {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;

    &.inline { 
        flex-direction: row; 
        align-items: center;
        gap: var(--space-sm);
        > label { 
            color: var(--black); 
            font-weight: 600;
            font-size: var(--font-size-md);
            padding-bottom: 0; 
        }
    }

    > label { 
        color: var(--dark); 
        font-size: var(--font-size-lg);
        padding-bottom: var(--space-xs); 
    }
    > input, > textarea {
        background-color: var(--white);
        border: 2px solid var(--light);
        border-radius: var(--radius-pill);
        &::file-selector-button { all: unset; display: none; };
    }
    --chat-radius-factor: 1;
    --chat-radius: clamp(
        var(--radius-xs),
        calc(var(--radius-xl) / var(--chat-radius-factor) / 3),
        var(--radius-xl)
    );
    >textarea { 
        /* field-sizing: content; */
        white-space: normal;
        overflow-wrap: break-word;
        border-radius: var(--chat-radius);
        border-radius: var(--chat-radius);
    }
    &.transparent {
        > input { background-color: transparent; }
    }
}

.input-group {
    display: flex;
    align-items: center;
    flex: 1;

    background-color: var(--white);
    border: 2px solid var(--light);
    border-radius: var(--radius-pill);
    overflow: hidden;

    input { border: none; border-radius: 0; }
    > span { 
        white-space: nowrap;
        padding: var(--space-sm); 
        color: var(--dark);
        background-color: color-mix(in srgb, var(--secondary) 10%, var(--white));
        border-right: 2px solid var(--light);
    }
    > .input-field { flex: 1; }
    > .input-field:not(.input-field:last-child) {
        border-right: 2px solid var(--light);
    }
    > .input-field:last-child {
        > input {
            border-top-right-radius: var(--radius-pill);
            border-bottom-right-radius: var(--radius-pill);
        }
    }

    &.transparent {
        background-color: transparent;
        input { background-color: transparent; }
    }
}

.input-select {
    display: flex;
    flex-direction: column;
    flex: 1;

    &.inline { 
        flex-direction: row; 
        align-items: center;
        gap: var(--space-sm);
        > label { 
            color: var(--black); 
            font-weight: 600;
            font-size: var(--font-size-md); 
            padding-bottom: 0; 
        }
    }

    > label { 
        color: var(--dark); 
        font-size: var(--font-size-lg);
        padding-bottom: var(--space-xs); 
    }
    > select {
        display: flex;
        appearance: base-select;
        padding: 0;

        > button {
            display: flex;
            justify-content: space-between;
            background-color: var(--white);
            flex: 1;
            
            padding: calc(0.5 * var(--space-sm)) var(--space-md);
            > selectedcontent {
                display: flex;
                align-items: center;
                gap: var(--space-sm);
                > .icon { width: var(--space-md); }
            }
        }
        > option {
            &:active { background-color: color-mix(in srgb, var(--secondary) 10%, var(--white)); }
            &.selected, &:checked { 
                background-color: var(--white); 
                color: var(--secondary); 
                font-weight: 600;
            }
        }
        > option::checkmark {
            content: "";
            order: 1; 
            margin-left: auto;
            width: var(--font-size-lg);
            height: var(--font-size-lg);
            background: url(/static/images/icons/check-secondary.svg) no-repeat center / contain;
        }

        &:focus-within { > button { box-shadow: inset 0 0 0 1px var(--secondary); } }
        &:user-valid { > button { box-shadow: inset 0 0 0 1px var(--secondary); } }
        &:user-invalid { > button { box-shadow: inset 0 0 0 1px var(--error); } }
    }
    ::picker-icon { display: none; }
    ::picker(select) {
        appearance: base-select;
        max-height: 300px;
        box-shadow: var(--shadow-md);
        background-color: var(--white);
        border: 2px solid var(--light);
        border-radius: var(--radius-md);
        margin-block-start: calc(var(--space-xs) / 2 );
        margin-block-end: calc(var(--space-xs) / 2 );
    }
    &.transparent {
        > select > button {
            background: transparent;
        }
    } 
}

.input-multiselect {
    display: flex;
    flex-direction: column;

    > label { 
        color: var(--dark); 
        font-size: var(--font-size-lg);
        padding-bottom: var(--space-xs); 
    }
    > button {
        justify-content: space-between;
        background-color: var(--white);
        &:focus { box-shadow: inset 0 0 0 1px var(--secondary); }
    }

    &.transparent {
        > button { background-color: transparent; }
    }

    > [popover] {
        max-height: 300px;
        inline-size: anchor-size(width);
        box-shadow: var(--shadow-md);
        position-try-fallbacks: --bottom-left, --bottom-right, --top-left, --top-right;
        inset: auto;
        top: anchor(bottom);
        left: anchor(left);
        margin-block-start: calc(var(--space-xs) / 2 );

        &:popover-open {
            display: flex;
            flex-direction: column;
        }
        
        > .input-field { padding: var(--space-xs) 0; }

        > select {
            display: flex;
            appearance: base-select;
            width: 100%;
            padding: 0;

            > option {
                &:active { background-color: color-mix(in srgb, var(--secondary) 10%, var(--white)); }
                &.selected, &:checked { 
                    background-color: var(--white); 
                    color: var(--secondary); 
                    font-weight: 600;
                }
            }
            > option::checkmark {
                content: "";
                order: 1; 
                margin-left: auto;
                width: var(--font-size-lg);
                height: var(--font-size-lg);
                background: url(/static/images/icons/check-secondary.svg) no-repeat center / contain;
            }
        }
    }
}

.input-chat {
    display: flex;
    flex: 1;

    --chat-radius-factor: 1;
    --chat-radius: clamp(
        var(--radius-xs),
        calc(var(--radius-xl) / var(--chat-radius-factor) / 2),
        var(--radius-xl)
    );

    border: 2px solid var(--light);
    border-radius: var(--chat-radius);
    background-color: var(--white);
    
    &.transparent { background-color: transparent; }

    >textarea { 
        flex: 1; 
        field-sizing: content;
        white-space: normal;
        overflow-wrap: break-word;
        padding-right: calc(var(--space-xs) / 2);
        border-top-left-radius: var(--chat-radius);
        border-bottom-left-radius: var(--chat-radius);
    }

    >button {
        color: var(--dark);
        padding-right: var(--space-md);
        padding-left: var(--space-sm);

        border-top-right-radius: var(--chat-radius);
        border-bottom-right-radius: var(--chat-radius);
        &:focus { box-shadow: inset 0 0 0 1px var(--secondary); }
    }
}

.input-search {
    display: flex;
    flex: 1;

    border: 2px solid var(--light);
    border-radius: var(--radius-pill);
    background-color: var(--white);
    
    &.transparent { background-color: transparent; }

    >input { 
        flex: 1; 
        padding-right: calc(var(--space-xs) / 2);
        border-top-left-radius: var(--radius-pill);
        border-bottom-left-radius: var(--radius-pill);
    }

    >button {
        color: var(--dark);
        padding-right: var(--space-md);
        padding-left: var(--space-sm);
        aspect-ratio: auto;

        border-top-right-radius: var(--radius-pill);
        border-bottom-right-radius: var(--radius-pill);
        &:focus { box-shadow: inset 0 0 0 1px var(--secondary); }
    }
}

input[type="checkbox"] {
    width: var(--font-size-md);
    height: var(--font-size-md);

    background-color: var(--white);
    border: 2px solid var(--light);
    border-radius: var(--radius-xs);

    &:checked {
        border-color: var(--secondary);
        background-color: var(--secondary);
        background: center/var(--font-size-lg) var(--font-size-lg) no-repeat url(/static/images/icons/check.svg), var(--secondary);
    }
    &:hover { border-color: var(--secondary); }
    &:focus { box-shadow: inset 0 0 0 1px var(--secondary); }
}

.input-checkbox {
    display: flex;
    flex: 1;
    gap: var(--space-xs);
    align-items: center;
}

input[type="submit"] {
    flex: 1;
    text-align: center;
}

.button, input[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: calc(0.5 * var(--space-sm)) var(--space-md);
    cursor: pointer;
    color: var(--white);
    background-color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: var(--radius-pill);
    white-space: nowrap;

    > .icon { width: var(--space-md); }

    &:hover {
        color: var(--primary);
        background-color: var(--white);
    }
    &:disabled {
        cursor: pointer;
        color: var(--dark);
        background-color: var(--light);
        border: 2px solid var(--dark);
        box-shadow: none;
        &:hover { color: var(--dark); background-color: var(--light); }
    }

    &.white { 
        color: var(--dark);
        background-color: var(--white); 
        border: 2px solid var(--light);
    }
    &.info {
        color: var(--info);
        background-color: var(--info);
        background-color: color-mix(in srgb, var(--info) 10%, var(--white));
        border: 2px solid var(--info); 
    }
    &.success {
        color: var(--success);
        background-color: var(--success);
        background-color: color-mix(in srgb, var(--success) 10%, var(--white));
        border: 2px solid var(--success); 
    }
    &.warning {
        color: var(--warning);
        background-color: var(--warning);
        background-color: color-mix(in srgb, var(--warning) 10%, var(--white));
        border: 2px solid var(--warning); 
    }
    &.error {
        color: var(--error);
        background-color: var(--error);
        background-color: color-mix(in srgb, var(--error) 10%, var(--white));
        border: 2px solid var(--error); 
    }
    &.transparent {
        padding: 0;
        color: var(--dark);
        background-color: transparent;
        border: none;
        &:hover { color: var(--primary); background-color: transparent; }
        &:disabled { cursor: pointer; color: var(--light); }
        &.selected { color: var(--primary); background-color: transparent; }
    }
}

.button-group {
    display: inline-flex;
    flex: 1;
    gap: 1px;
    background-color: var(--primary);
    border-radius: var(--radius-pill);
    overflow: hidden;

    > button {
        border-radius: 0px;
    }
    > button:first-child {
        border-top-left-radius: var(--radius-pill);
        border-bottom-left-radius: var(--radius-pill);
    }
    > button:last-child {
        border-top-right-radius: var(--radius-pill);
        border-bottom-right-radius: var(--radius-pill);
    }
    > button:not(button:first-child) {
        box-shadow: -1px 0 0 var(--white);
    }
}

.errors {
    all: unset;
    >li {
        all: unset;
        font-size: var(--font-size-sm);
        color: var(--error);
    }
}