//v4 compatibility for blazor
@use "sass:math";

//variables
$custom-forms-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

$custom-control-gutter: .5rem !default;
$custom-control-spacer-x: 1rem !default;
$custom-control-cursor: null !default;

$custom-control-indicator-size: 1rem !default;
$custom-control-indicator-bg: $input-bg !default;

$custom-control-indicator-bg-size: 50% 50% !default;
$custom-control-indicator-box-shadow: $input-box-shadow !default;
$custom-control-indicator-border-color: $gray-500 !default;
$custom-control-indicator-border-width: $input-border-width !default;

$custom-control-label-color: null !default;

$custom-control-indicator-disabled-bg: $input-disabled-bg !default;
$custom-control-label-disabled-color: $gray-600 !default;

$custom-control-indicator-checked-color: $component-active-color !default;
$custom-control-indicator-checked-bg: $component-active-bg !default;
$custom-control-indicator-checked-disabled-bg: rgba($primary, .5) !default;
$custom-control-indicator-checked-box-shadow: null !default;
$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;

$custom-control-indicator-focus-box-shadow: $input-focus-box-shadow !default;
$custom-control-indicator-focus-border-color: $input-focus-border-color !default;

$custom-control-indicator-active-color: $component-active-color !default;
$custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default;
$custom-control-indicator-active-box-shadow: null !default;
$custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default;

$custom-checkbox-indicator-border-radius: $border-radius !default;
$custom-checkbox-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>") !default;

$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
$custom-checkbox-indicator-icon-indeterminate: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/></svg>") !default;
$custom-checkbox-indicator-indeterminate-box-shadow: null !default;
$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;

$custom-radio-indicator-border-radius: 50% !default;
$custom-radio-indicator-icon-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;

$custom-switch-width: $custom-control-indicator-size * 1.75 !default;
$custom-switch-indicator-border-radius: math.div($custom-control-indicator-size, 2) !default;
$custom-switch-indicator-size: subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;


//styles
//v4 compatibility for blazor
// Checkboxes and radios
//
// Base class takes care of all the key behavioral aspects.

.custom-control {
    position: relative;
    z-index: 1;
    display: block;
    min-height: $font-size-base * $line-height-base;
    padding-left: $custom-control-gutter + $custom-control-indicator-size;
    color-adjust: exact; // Keep themed appearance for print
}

.custom-control-inline {
    display: inline-flex;
    margin-right: $custom-control-spacer-x;
}

.custom-control-input {
    position: absolute;
    left: 0;
    z-index: -1; // Put the input behind the label so it doesn't overlay text
    width: $custom-control-indicator-size;
    height: math.div($font-size-base * $line-height-base + $custom-control-indicator-size, 2);
    opacity: 0;

    &:checked ~ .custom-control-label::before {
        color: $custom-control-indicator-checked-color;
        border-color: $custom-control-indicator-checked-border-color;
        @include gradient-bg($custom-control-indicator-checked-bg);
        @include box-shadow($custom-control-indicator-checked-box-shadow);
    }

    &:focus ~ .custom-control-label::before {
        // the mixin is not used here to make sure there is feedback
        @if $enable-shadows {
            box-shadow: $input-box-shadow, $custom-control-indicator-focus-box-shadow;
        } @else {
            box-shadow: $custom-control-indicator-focus-box-shadow;
        }
    }

    &:focus:not(:checked) ~ .custom-control-label::before {
        border-color: $custom-control-indicator-focus-border-color;
    }

    &:not(:disabled):active ~ .custom-control-label::before {
        color: $custom-control-indicator-active-color;
        background-color: $custom-control-indicator-active-bg;
        border-color: $custom-control-indicator-active-border-color;
        @include box-shadow($custom-control-indicator-active-box-shadow);
    }

    // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
    &[disabled],
    &:disabled {
        ~ .custom-control-label {
            color: $custom-control-label-disabled-color;

            &::before {
                background-color: $custom-control-indicator-disabled-bg;
            }
        }
    }
}

// Custom control indicators
//
// Build the custom controls out of pseudo-elements.

.custom-control-label {
    &.dx-blazor-custom-control-label {
        display: inline-block;
    }

    position: relative;
    margin-bottom: 0;
    color: $custom-control-label-color;
    vertical-align: top;
    cursor: $custom-control-cursor;

    // Background-color and (when enabled) gradient
    &::before {
        position: absolute;
        top: math.div($font-size-base * $line-height-base - $custom-control-indicator-size, 2);
        left: -($custom-control-gutter + $custom-control-indicator-size);
        display: block;
        width: $custom-control-indicator-size;
        height: $custom-control-indicator-size;
        pointer-events: none;
        content: "";
        background-color: $custom-control-indicator-bg;
        border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width;
        @include box-shadow($custom-control-indicator-box-shadow);
    }

    // Foreground (icon)
    &::after {
        position: absolute;
        top: math.div($font-size-base * $line-height-base - $custom-control-indicator-size, 2);
        left: -($custom-control-gutter + $custom-control-indicator-size);
        display: block;
        width: $custom-control-indicator-size;
        height: $custom-control-indicator-size;
        content: "";
        background: 50% / #{$custom-control-indicator-bg-size} no-repeat;
    }
}


// Checkboxes
//
// Tweak just a few things for checkboxes.

.custom-checkbox {
    .custom-control-label::before {
        @include border-radius($custom-checkbox-indicator-border-radius);
    }

    .custom-control-input:checked ~ .custom-control-label {
        &::after {
            background-image: escape-svg($custom-checkbox-indicator-icon-checked);
        }
    }

    .custom-control-input:indeterminate ~ .custom-control-label {
        &::before {
            border-color: $custom-checkbox-indicator-indeterminate-border-color;
            @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
            @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
        }

        &::after {
            background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
        }
    }

    .custom-control-input:disabled {
        &:checked ~ .custom-control-label::before {
            @include gradient-bg($custom-control-indicator-checked-disabled-bg);
        }

        &:indeterminate ~ .custom-control-label::before {
            @include gradient-bg($custom-control-indicator-checked-disabled-bg);
        }
    }
}

// Radios
//
// Tweak just a few things for radios.

.custom-radio {
    .custom-control-label::before {
        // stylelint-disable-next-line property-disallowed-list
        border-radius: $custom-radio-indicator-border-radius;
    }

    .custom-control-input:checked ~ .custom-control-label {
        &::after {
            background-image: escape-svg($custom-radio-indicator-icon-checked);
        }
    }

    .custom-control-input:disabled {
        &:checked ~ .custom-control-label::before {
            @include gradient-bg($custom-control-indicator-checked-disabled-bg);
        }
    }
}

// switches
//
// Tweak a few things for switches

.custom-switch {
    padding-left: $custom-switch-width + $custom-control-gutter;

    .custom-control-label {
        &::before {
            left: -($custom-switch-width + $custom-control-gutter);
            width: $custom-switch-width;
            pointer-events: all;
            // stylelint-disable-next-line property-disallowed-list
            border-radius: $custom-switch-indicator-border-radius;
        }

        &::after {
            top: add(math.div($font-size-base * $line-height-base - $custom-control-indicator-size, 2), $custom-control-indicator-border-width * 2);
            left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
            width: $custom-switch-indicator-size;
            height: $custom-switch-indicator-size;
            background-color: $custom-control-indicator-border-color;
            // stylelint-disable-next-line property-disallowed-list
            border-radius: $custom-switch-indicator-border-radius;
            @include transition(transform .15s ease-in-out, $custom-forms-transition);
        }
    }

    .custom-control-input:checked ~ .custom-control-label {
        &::after {
            background-color: $custom-control-indicator-bg;
            transform: translateX($custom-switch-width - $custom-control-indicator-size);
        }
    }

    .custom-control-input:disabled {
        &:checked ~ .custom-control-label::before {
            @include gradient-bg($custom-control-indicator-checked-disabled-bg);
        }
    }
}

.custom-control-label::before {
    @include transition($custom-forms-transition);
}

.form-inline {
    // Kick in the inline
    @include media-breakpoint-up(sm) {

        .custom-control {
            align-items: center;
            justify-content: center;
        }
        .custom-control-label {
            margin-bottom: 0;
        }
    }
}

/*   We have different validation mechanism in blazor
.custom-control-input {
    @include form-validation-state-selector($state) {
      ~ .custom-control-label {
        color: $color;

        &::before {
          border-color: $color;
        }
      }

      &:checked {
        ~ .custom-control-label::before {
          border-color: lighten($color, 10%);
          @include gradient-bg(lighten($color, 10%));
        }
      }

      &:focus {
        ~ .custom-control-label::before {
          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
        }

        &:not(:checked) ~ .custom-control-label::before {
          border-color: $color;
        }
      }
    }
  }*/
