//
// _forms.scss
//

// Form Control
.form-control,
.form-select {
    &:hover {
        border-color: $input-focus-border-color;
    }
}

select[multiple] option {
  padding: 6px 10px;
}


// Form Select
.form-select {
    padding-inline-end: $form-select-indicator-padding;
}

// Form Control Small
.form-control-sm {
    line-height: normal;
}

// Form elements (Color and Range)
input.form-control[type='color'],
input.form-control[type='range'] {
    min-height: $input-height;
}

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

@each $state in map-keys($theme-colors) {
    .form-check-#{$state} {
        .form-check-input {
            &:checked {
                background-color: var(--#{$prefix}#{$state});
                border-color: var(--#{$prefix}#{$state});
            }
        }
    }
}

// card radio
.card-radio {
    padding: 0;

    .form-check-label {
        background-color: $card-bg;
        border: 1px solid var(--#{$prefix}border-color);
        border-radius: $border-radius;
        padding: 1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        position: relative;
        padding-inline-end: 32px;

        &:hover {
            cursor: pointer;
        }
    }

    .form-check-input {
        display: none;

        &:checked + .form-check-label {
            &:before {
                content: "";
                display: inline-block;
                width: 24px;
                height: 24px;
                background-color: currentColor; // uses parent text color
                mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944zm3.697 7.282a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z'/></svg>");
                mask-size: contain;
                mask-repeat: no-repeat;
                position: absolute;
                bottom: 6px;
                inset-inline-end: 6px;
            }
        }
    }

    &.card-radio-bordered {
        .form-check-input {
            &:checked + .form-check-label {
                border: 1px solid var(--#{$prefix}primary);
                &:before {
                    background-color: var(--#{$prefix}primary);
                }
            }
        }
    }
}

// Custom Form Check (Gray Styled)
.form-check-input-light {
    background-color: rgba(var(--#{$prefix}light-rgb), 0.9);
    border-color: rgba(var(--#{$prefix}light-rgb), 0.9);
    box-shadow: inset 0 1px 2px rgba(var(--#{$prefix}dark-rgb), 0.05);
}