// Custom input styling inspired by Bootstrap 5.
//
// 1. Keep themed appearance for print.
//
// 2. Make tap target of inline fields big enough to improve their accessibility on touch screens.
//
// 3. Reset extra space previously added to symmetrically pad the field in FormLayout context as
//    there already is a sufficient row gap provided by FormLayout.
//
// 4. Destroy tap target when subgrid is not supported.

@use "../../theme/typography";
@use "../../theme/form-fields" as theme;
@use "../accessibility";
@use "../transition";

@mixin check-input($type) {
    @include transition.add((background-color, background-position, box-shadow));

    appearance: none;
    width: theme.$check-input-size;
    height: theme.$check-input-size;
    margin-top: calc((1rem * #{typography.$line-height-base} - #{theme.$check-input-size}) / 2);
    border: theme.$check-input-border-width solid var(--rui-local-border-color);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: var(--rui-local-check-background-color);
    print-color-adjust: exact; // 1.

    &:focus,
    &:checked:focus {
        box-shadow: theme.$check-input-focus-box-shadow;
    }

    @if $type == "checkbox" {
        border-radius: theme.$check-input-checkbox-border-radius;

        &:checked {
            background-image: theme.$check-input-checkbox-checked-background-image;
        }
    }

    @if $type == "radio" {
        border-radius: theme.$check-input-radio-border-radius;

        &:checked {
            background-image: theme.$check-input-radio-checked-background-image;
        }
    }

    @if $type == "toggle" {
        width: theme.$check-input-toggle-width;
        border-radius: theme.$check-input-toggle-border-radius;
        background-image: theme.$check-input-toggle-default-background-image;
        background-position: theme.$check-input-toggle-default-background-position;
        background-size: theme.$check-input-toggle-background-size;

        &:checked {
            background-image: theme.$check-input-toggle-checked-background-image;
            background-position: theme.$check-input-toggle-checked-background-position;
        }
    }
}

// 2.
@mixin min-tap-target($type) {
    $input-width: theme.$check-input-size;

    @if $type == "toggle" {
        $input-width: theme.$check-input-toggle-width;
    }

    $tap-target-offset: calc((#{$input-width} - #{theme.$check-tap-target-size}) / 2);

    @include accessibility.min-tap-target($size: theme.$check-tap-target-size, $center: false);

    min-height: theme.$check-tap-target-size;
    padding-top: calc((#{theme.$check-tap-target-size} - 1rem * #{typography.$line-height-base}) / 2);

    &::before {
        top: 0;
        left: $tap-target-offset;
    }

    @if $type == "checkbox" or $type == "toggle" {
        &.hasRootLabelBefore::before {
            right: $tap-target-offset;
            left: auto;
        }

        // 3.
        &.isRootInFormLayout {
            min-height: 0;
            padding-top: 0;

            &::before {
                top: calc((1rem * #{typography.$line-height-base} - #{theme.$check-tap-target-size}) / 2);
            }
        }

        &.isRootInFormLayout.isRootLayoutHorizontal::before {
            grid-column-start: 2;

            // 4.
            @supports not (grid-template-columns: subgrid) {
                display: none;
            }
        }
    }
}