@use "sass:math";
$gray: map-get($colors, "gray");

@mixin inputText($border-color: $gray) {
    border: $base-border-thickness solid $border-color;
    border-radius: $base-input-radius;
    height: calc($base-font-size + 0.75rem);
    width: 100%;
    line-height: calc($base-font-size + math.div($base-font-size, 3));

    &:focus-visible {
        box-shadow: 0 0 0px 4px rgb($border-color, 10%);
        outline: none;
    }
}

@mixin inputCheck($color: $gray, $border-color: $gray) {
    appearance: none;
    background-color: #fff;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 1.5px solid $border-color;
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;

    &::before {
        content: "";
        width: 0.65em;
        height: 0.65em;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em $color;
        /* Windows High Contrast Mode */
        background-color: CanvasText;
        transform-origin: bottom left;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    &:focus {
        box-shadow: 0 0 0px 4px rgb($color, 10%);
    }

    &:disabled {
        color: $gray;
        cursor: not-allowed;

        &::before {
            box-shadow: inset 1em 1em $gray;
        }
    }
}

input[type="text"i].form-input {
    @include inputText();
}

input[type="checkbox"].form-input {
    @include inputCheck();
}

@each $key,
$val in $colors {
    input[type="text"i].form-input-#{$key} {
        @include inputText($val);
    }

    input[type="text"i].form-input-#{$key}-focus:focus-visible {
        box-shadow: 0 0 0px 4px rgb($val, 10%);
    }

    input[type="checkbox"].form-input-#{$key} {
        @include inputCheck($val);
    }

    input[type="checkbox"]:checked.form-input-#{$key}::before {
        transform: scale(1);
    }

    input[type="checkbox"].form-input-#{$key}-outline {
        @include inputCheck($val, $val);
    }
    input[type="checkbox"]:checked.form-input-#{$key}-outline::before {
        transform: scale(1);
    }
}