@use 'sass:math';
@use '../core' as *;

fieldset#{$selector-exclude-grid} {
    margin: 0;
    padding: 0;
    border: none;

    &:not(:last-child) {
        margin-bottom: $spacing-size-4;
    }
}

legend#{$selector-exclude-grid} {
    padding: unset;
}

label#{$selector-exclude-grid} {
    fieldset & {
        display: block;
    }

    + input#{$selector-exclude-grid},
    + select#{$selector-exclude-grid} {
        margin-left: $spacing-size-2;
    }

    &[for*='radio'],
    &[for*='checkbox'],
    &[for*='switch'] {
        cursor: pointer;
    }

    .req {
        color: var(--color-input-error);
    }
}

input#{$selector-exclude-grid} {
    font-size: var(--text-fs-base);
}

input[type='text']#{$selector-exclude-grid},
input[type='search']#{$selector-exclude-grid},
input[type='email']#{$selector-exclude-grid},
input[type='checkbox']#{$selector-exclude-grid},
input[type='radio']#{$selector-exclude-grid},
input[type='number']#{$selector-exclude-grid},
select#{$selector-exclude-grid} {
    color: var(--color-fg-primary);

    &:disabled,
    &[disabled],
    &.disabled {
        background-color: var(--color-bg-disabled_subtle);
    }
}

input[type='text'],
input[type='search'],
input[type='email'],
input[type='number'] {
    &#{$selector-exclude-grid} {
        padding: math.div(6em, 16) math.div(12em, 16);
        line-height: var(--text-lh-base);
        border-radius: var(--radius-sm);
        border: 1px solid var(--color-input-border);
        background-color: var(--color-bg-primary);
        outline: none;
        box-shadow:
            0 0 0 $spacing-size-1 transparent,
            var(--shadow-xs);
        transition:
            border-color $transition-default-timing,
            box-shadow $transition-default-timing;

        &::placeholder {
            color: var(--color-fg-placeholder);
        }

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

        &:focus-visible:not(:disabled):not([readonly]) {
            box-shadow:
                0 0 0 $spacing-size-1 var(--color-input-shadow-focus),
                var(--shadow-xs);
        }

        &:disabled,
        &[disabled],
        &.disabled {
            color: var(--color-input-disabled-fg);
            background-color: var(--color-input-disabled-bg);
            pointer-events: none;
            cursor: pointer;
        }
    }
}

input[type='checkbox']:not(.switch)#{$selector-exclude-grid},
input[type='checkbox'].switch#{$selector-exclude-grid},
input[type='radio']#{$selector-exclude-grid} {
    appearance: none;
    width: $spacing-size-5;
    height: $spacing-size-5;
    outline: none;

    &:focus-visible:not(:disabled):not([readonly]) {
        box-shadow: 0 0 0 $spacing-size-1 var(--color-input-shadow-focus);
    }

    &:not(:disabled) {
        cursor: pointer;
    }

    &:disabled,
    &[disabled],
    &.disabled {
        border-color: var(--color-border-tertiary);
    }
}

input[type='checkbox']:not(.switch)#{$selector-exclude-grid},
input[type='checkbox'].switch#{$selector-exclude-grid} {
    &:checked {
        background-color: var(--color-input-bg-checked);
        border-color: var(--color-input-bg-checked);
    }
}

input[type='checkbox']:not(.switch)#{$selector-exclude-grid} {
    --svg-tick: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.6673 6.5L8.25065 12.9167L5.33398 10"/></svg>');

    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-primary);
    transition:
        background-color $transition-default-timing,
        border-color $transition-default-timing,
        box-shadow $transition-default-timing;

    #{$selector-darkmode} & {
        border: 1px solid color-mix(in srgb, var(--color-bg-secondary), var(--color-fg-primary) 30%);
    }

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

    &:checked,
    &:disabled,
    &[disabled],
    &.disabled {
        background-image: var(--svg-tick);
    }

    &:disabled,
    &[disabled],
    &.disabled {
        --svg-tick: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%23eaecf0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.6673 6.5L8.25065 12.9167L5.33398 10"/></svg>');

        #{$selector-darkmode} & {
            --svg-tick: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%23141d2c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.6673 6.5L8.25065 12.9167L5.33398 10"/></svg>');
        }
    }

    #{$selector-darkmode} & {
        --svg-tick: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%23141d2c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.6673 6.5L8.25065 12.9167L5.33398 10"/></svg>');
    }
}

input[type='checkbox'].switch {
    $height: $spacing-size-5;

    width: $height * 2;
    height: $height;
    background-color: var(--color-fg-quinary);
    border-radius: math.div($height, 2);
    background-image: radial-gradient(
        var(--color-bg-primary) calc($height / 2 - 3.5px),
        transparent calc($height / 2 - 2.5px)
    );
    background-repeat: no-repeat;
    background-size: $height $height;
    transition:
        background-position $transition-default-timing,
        background-color $transition-default-timing,
        box-shadow $transition-default-timing;

    &:checked {
        background-position: right;
        background-color: var(--color-input-bg-checked);
    }
}

input[type='radio']#{$selector-exclude-grid} {
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-primary);
    transition:
        background-color $transition-default-timing,
        border-color $transition-default-timing,
        box-shadow $transition-default-timing;

    #{$selector-darkmode} & {
        border: 1px solid color-mix(in srgb, var(--color-bg-secondary), var(--color-fg-primary) 30%);
    }

    &:hover:not(:disabled):not([readonly]),
    &.hover {
        border: 1px solid var(--color-input-border-hover);
    }

    &:checked:not(:disabled):not([readonly]) {
        border: 6px solid var(--color-input-bg-checked);
    }

    &:disabled,
    &[disabled],
    &.disabled {
        box-shadow: inset 0 0 0 1px var(--color-border-tertiary);
    }
}

select#{$selector-exclude-grid} {
    --svg-chevron-down: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%23182230" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 9L12 15L18 9"/></svg>');

    appearance: none;
    padding: math.div(6em, 16) math.div(36em, 16) math.div(6em, 16) math.div(12em, 16);
    font-size: var(--text-fs-base);
    line-height: var(--text-lh-base);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-primary);
    background-image: var(--svg-chevron-down);
    background-repeat: no-repeat;
    background-position: center right 4px;
    border: 1px solid var(--color-input-border);
    outline: none;
    transition:
        border-color $transition-default-timing,
        box-shadow $transition-default-timing;
    cursor: pointer;

    &:hover,
    &.hover,
    &:focus-visible {
        border-color: var(--color-input-border-hover);
    }

    &:focus-visible {
        box-shadow: 0 0 0 $spacing-size-1 var(--color-input-shadow-focus);
    }

    &:disabled,
    &[disabled],
    &.disabled {
        --svg-chevron-down: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%23667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 9L12 15L18 9"/></svg>');

        color: var(--color-fg-secondary);
        pointer-events: none;

        #{$selector-darkmode} & {
            --svg-chevron-down: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%2398a2b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 9L12 15L18 9"/></svg>');
        }
    }

    #{$selector-darkmode} & {
        --svg-chevron-down: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%23eaecf0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 9L12 15L18 9"/></svg>');
    }
}

textarea {
    outline: none;
    transition: box-shadow $transition-default-timing;

    &:focus-visible {
        box-shadow: 0 0 0 $spacing-size-1 var(--color-input-shadow-focus);
    }
}

input[type='range']#{$selector-exclude-grid} {
    @mixin track {
        height: math.div(4em, 16);
        background-color: var(--color-input-border);
        border-radius: var(--radius-sm);
    }

    @mixin thumb {
        appearance: none;
        width: 1em;
        height: 1em;
        margin-top: math.div(-6em, 16);
        border-radius: 50%;
        border: none;
        background-color: var(--color-link);
        transition: background-color $transition-default-timing;
    }

    appearance: none;
    min-height: $spacing-size-6;
    border-radius: var(--radius-sm);
    background-color: transparent;
    outline: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition:
        border-color $transition-default-timing,
        box-shadow $transition-default-timing;

    &:focus-visible:not(:disabled):not([readonly]),
    &.focus {
        border-color: var(--color-input-border-hover);
        box-shadow: 0 0 0 $spacing-size-1 var(--color-input-shadow-focus);
    }

    // Using mixins as -webkit & -moz properties cannot be used as comma seperted list
    &::-webkit-slider-runnable-track {
        @include track;
    }
    &::-moz-range-track {
        @include track;
    }
    &::-webkit-slider-thumb {
        @include thumb;
    }
    &::-moz-range-thumb {
        @include thumb;
    }

    &:hover::-webkit-slider-thumb,
    &:hover::-moz-range-thumb {
        background-color: var(--color-link-hover);
    }
}

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

    label {
        margin-bottom: $spacing-size-1;
        font-size: var(--text-fs-sm);
    }

    input,
    select {
        margin-left: 0;
    }

    select {
        align-self: flex-start;
    }

    &.inline {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: $spacing-size-1 $spacing-size-2;

        label {
            display: inline-block;
            margin-bottom: 0;
            font-size: var(--text-fs-base);
        }

        input[type='text'],
        input[type='search'],
        input[type='email'] {
            min-width: 280px;
        }
    }
}

.input-error {
    input,
    select {
        --color-border-primary: var(--color-input-error);
        --color-input-border: var(--color-input-error);
        --color-input-border-hover: var(--color-input-error);
    }
}

.input-field .error {
    margin-top: -2px;
    margin-bottom: -2px;
    font-size: var(--text-fs-sm);
    color: var(--color-input-error);
    opacity: 0;
    transition: opacity $transition-default-timing;
}

.input-error .error {
    opacity: 1;
}

.extra-info {
    margin-top: $spacing-size-1;
    color: var(--color-fg-secondary);
}
