@use "./layout" as layout;
@use "./typography" as type;
@use "./colorize" as colorize;
@use "./buttons" as button;
@use "./color" as color;
@use "./utils" as utils;

//
@mixin appearance-decl() {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition:
        background-color var(--transition-normal, 160ms ease),
        border-color var(--transition-normal, 160ms ease),
        color var(--transition-normal, 160ms ease),
        box-shadow var(--transition-normal, 160ms ease),
        transform var(--transition-fast, 120ms ease);

    //
    transform: translateZ(0);
    transform-origin: 50% 50%;
    backface-visibility: hidden;
}

//
$select-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath d='M4.2 6.4a.75.75 0 0 1 1.06-.05L8 8.68l2.74-2.33a.75.75 0 1 1 .98 1.14l-3.24 2.75a.75.75 0 0 1-.98 0L4.25 7.49a.75.75 0 0 1-.05-1.06z'/%3e%3c/svg%3e");
$checkbox-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.32 8.38a.75.75 0 1 1 1.06-1.06l2.09 2.08 3.99-4.99z'/%3e%3c/svg%3e");
$radio-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");

//
@mixin icon-style($name: "select", $icon: $select-icon) {
    pointer-events: none;
    mask-image: $icon;
    mask-repeat: no-repeat;
    mask-origin: content-box;
    mask-clip: content-box;
    mask-position: center;
    mask-size: contain;
    mask-type: alpha;

    //
    content: "";
    display: flex;
    background-color: var(--icon-color, var(--on-surface-color, currentColor));
    inline-size: var(--#{$name}-indicator-size, var(--space-lg));
    block-size: var(--#{$name}-indicator-size, var(--space-lg));
    margin-inline-start: auto;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    text-align: center;
    overflow: hidden;

    //
    place-content: center;
    place-items: center;
    place-self: center;
}

//
@mixin option-radius() {
    --_option-border-radius: 0px;
    --_option-border-block-start-size: 0px;
    --_option-border-block-end-size: 0px;
    --_option-border-inline-size: 0.5px;

    //
    --_option-border-radius-start-start: 0px;
    --_option-border-radius-start-end: 0px;
    --_option-border-radius-end-start: 0px;
    --_option-border-radius-end-end: 0px;

    //
    border-radius: var(--_option-border-radius-start-start) var(--_option-border-radius-start-end) var(--_option-border-radius-end-start) var(--_option-border-radius-end-end);
    border-inline-start-width: var(--_option-border-inline-size, 1px);
    border-inline-end-width: var(--_option-border-inline-size, 1px);
    border-block-start-width: var(--_option-border-block-start-size, 0px);
    border-block-end-width: var(--_option-border-block-end-size, 0px);

    //
    &:first-of-type {
        --_option-border-block-start-size: 0.5px;
        --_option-border-radius-start-start: var(--radius-sm);
        --_option-border-radius-start-end: var(--radius-sm);
    }

    //
    &:last-of-type {
        --_option-border-block-end-size: 0.5px;
        --_option-border-radius-end-start: var(--radius-sm);
        --_option-border-radius-end-end: var(--radius-sm);
    }
}

//
@mixin variable-colorization($name: "input") {
    @include type.type("body-medium");
    @include type.text-wrap();

    //
    --_#{$name}-border-current: var(--#{$name}-border-color, var(--border-color, transparent));
    --_#{$name}-surface-current: var(--#{$name}-surface-color, var(--#{$name}-surface, var(--surface-color, transparent)));
    --_#{$name}-shadow-current: var(--#{$name}-shadow, var(--shadow-color, transparent));
    --_#{$name}-text-current: var(--#{$name}-text-color, var(--on-surface-color, currentColor));
    --_#{$name}-icon-current: var(--#{$name}-icon-color, var(--on-surface-color, currentColor));

    //
    & {
        cursor: var(--#{$name}-cursor, pointer);
        background-color: var(--_#{$name}-surface-current, var(--surface-color, transparent));
        color: var(--_#{$name}-text-current, var(--on-surface-color, currentColor));
        -webkit-text-fill-color: var(--_#{$name}-text-current, var(--on-surface-color, currentColor));
        --icon-color: var(--_#{$name}-icon-current, currentColor);
    }

    //
    &:is(textarea) { cursor: text; }
    /*&:is(:checked, [aria-selected="true"]) {
        --_#{$name}-surface-current: var(--#{$name}-surface-checked, var(--on-surface-color, transparent));
        --_#{$name}-border-current: var(--#{$name}-border-checked, var(--border-color, transparent));
        --_#{$name}-text-current: var(--#{$name}-text-checked, var(--surface-color, currentColor));
        --_#{$name}-icon-current: var(--#{$name}-icon-checked, var(--surface-color, currentColor));
    }*/

    //
    /*@include utils.when-hover {
        &:not(:disabled):not([aria-disabled="true"]) {
            --_#{$name}-surface-current: var(--#{$name}-surface-hover, var(--surface-color, transparent));
            --_#{$name}-border-current: var(--#{$name}-border-hover, var(--border-color, transparent));
            --_#{$name}-shadow-current: var(--#{$name}-shadow-hover, var(--shadow-color, transparent));
            --_#{$name}-text-current: var(--#{$name}-text-hover, var(--on-surface-color, currentColor));
        }
    }*/

    //
    /*@include utils.when-active {
        &:not(:disabled):not([aria-disabled="true"]) {
            --_#{$name}-surface-current: var(--#{$name}-surface-active, var(--surface-color, transparent));
            --_#{$name}-border-current: var(--#{$name}-border-active, var(--border-color, transparent));
            --_#{$name}-shadow-current: var(--#{$name}-shadow-active, var(--shadow-color, transparent));
            --_#{$name}-text-current: var(--#{$name}-text-active, var(--on-surface-color, currentColor));
        }
    }*/

    //
    /*@include utils.when-focus {
        &:not(:disabled):not([aria-disabled="true"]) {
        --_#{$name}-surface-current: var(--#{$name}-surface-focus, var(--surface-color, transparent));
            --_#{$name}-border-current: var(--#{$name}-border-focus, var(--border-color, transparent));
            --_#{$name}-shadow-current: var(--#{$name}-shadow-focus, var(--shadow-color, transparent));
            --_#{$name}-text-current: var(--#{$name}-text-focus, var(--on-surface-color, currentColor));
        }
    }*/

    //
    &:invalid, &[aria-invalid="true"] {
        --current: var(--color-error, var(--color-danger, currentColor));

        /*
        --_#{$name}-border-current: var(--#{$name}-border-error, var(--border-color, transparent));
        --_#{$name}-surface-current: var(--#{$name}-surface-error, var(--surface-color, transparent));
        --_#{$name}-shadow-current: var(--#{$name}-shadow-error, var(--shadow-color, transparent));
        */
    }

    //
    @include utils.when-disabled {
        /*
        --_#{$name}-border-current: var(--#{$name}-border-disabled, var(--border-color, transparent));
        --_#{$name}-surface-current: var(--#{$name}-surface-disabled, var(--surface-color, transparent));
        --_#{$name}-text-current: var(--#{$name}-text-disabled, color-mix(in oklch, var(--input-text-color, currentColor) 55%, transparent));
        --_#{$name}-shadow-current: none;*/

        //
        cursor: not-allowed;
        resize: none;
        user-select: none;
    }

    //
    &[readonly] {
        /*
        --_#{$name}-border-current: var(--#{$name}-border-readonly, var(--border-color, transparent));
        --_#{$name}-surface-current: var(--#{$name}-surface-readonly, var(--surface-color, transparent));
        --_#{$name}-text-current: var(--#{$name}-text-readonly, var(--on-surface-color, currentColor));
        */

        //
        cursor: default;
    }

    //
    &::-moz-focus-inner { border: 0; }

    //
    span, a, ui-icon {
        --icon-color: var(--_#{$name}-icon-current, var(--_#{$name}-text-current, var(--on-surface-color, currentColor)));
        color: var(--_#{$name}-text-current, var(--on-surface-color, currentColor));
        background-color: transparent;
    }
}