@use "../global";
@use "sass:list";
@use "sass:meta";
@use 'variables';

/* Fieldsets */
fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 var(--fieldset-bottom-margin);
    position: relative;
}

/* Labels */
label, .label {
    color: var(--label-color);
    display: flex;
    align-items: center;
    position: relative;

    &[required]::after {
        content: '*';
        color: var(--label-color-required);
    }
}

$inputSizes: s l;
@if meta.variable-exists(appInputSizes) {
    $inputSizes: list.join($inputSizes, $appInputSizes);
}

/* Inputs */
@mixin inputStyling ($includeVariants: false) {
    border-width: var(--input-border-size);
    border-style: solid;
    border-color: var(--input-border-color);
    border-radius: var(--input-border-radius);
    display: block;
    width: 100%;
    line-height: var(--input-height);
    height: var(--input-height);
    font-size: var(--input-fontsize);
    font-family: var(--input-fontfamily, var(--font-family));
    padding: var(--input-padding);
    margin: 0;
    color: var(--input-color);
    background-color: var(--input-bg);
    transition: border-color 0.3s ease, background-color 0.3s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    @if $includeVariants {
        @include inputStylingVariants();
    }
}
@mixin inputStylingVariants($suffix: null) {
    @each $size in $inputSizes {
        &.-#{$size}#{$suffix} {
            --input-height: var(--input-height-#{$size});
        }

        @each $bpname, $bpsize in global.$breakpoints {
            @media #{$bpsize} {
                &.#{$bpname}\:-#{$size}#{$suffix} {
                    --input-height: var(--input-height-#{$size});
                }
            }
        }
    }
}
input,
select,
textarea,
.-like-input {
    @include inputStyling(true);

    &:focus, &:focus-within {
        --input-border-color: var(--input-focus-border-color);
        outline: none;
    }
    &::placeholder {
        color: var(--input-placeholder-color);
    }

    &:not([readonly]):not(:focus):hover,
    &.-like-input[readonly]:not(:focus):hover {
        --input-border-color: var(--input-hover-border-color);
    }
    &[readonly]:not(.-like-input),
    &[readonly].like-input.-like-input-supports-readonly {
        --input-bg: var(--input-bg-readonly);
    }

    &:not([required]):invalid {
        --input-bg: var(--input-invalid-bg);
    }

    &.-ghost {
        border-width: 0;
        border-radius: 0;
        --input-border-radius: 0;
    }
}

input[type="checkbox"],
input[type="radio"] {
    position: absolute;
    z-index: -1;
    opacity: 0;
    width: 1rem;

    & + label {
        &::before {
            @include inputStyling(false);
        }
        &:hover::before {
            --input-border-color: var(--input-hover-border-color);
            --label-color: var(--color-primary);
        }
    }
    &:hover {
        --label-color: var(--color-primary);
    }
    &[readonly] + label {
        --input-bg: var(--input-bg-readonly);
    }
    @include inputStylingVariants('+label');
}

input[type=number] {
    -moz-appearance: textfield;

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}

textarea {
    height: var(--textarea-height);
    line-height: 2.4rem;
    padding-top: var(--size);
}

select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23718096" d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z"/></svg>');
    background-repeat: no-repeat;
    background-size: var(--size-l);
    background-position: right var(--size) center;
    padding-right: calc(var(--size) * 3);
}

@include meta.load-css('color');
@include meta.load-css('checkboxradio');
@include meta.load-css('range');
@include meta.load-css('buttons');
@include meta.load-css('radiogroups');
@include meta.load-css('groups');