@use "sass:map";
@import "./../node_modules/bootstrap/scss/_functions";
@import "./../node_modules/bootstrap/scss/vendor/_rfs";
@import "./../node_modules/bootstrap/scss/mixins/_box-shadow";
@import "./../node_modules/bootstrap/scss/mixins/_transition";
@import "./../node_modules/bootstrap/scss/mixins/_forms";
@import "./../node_modules/bootstrap/scss/mixins/_gradients";
@import "./../node_modules/bootstrap/scss/_variables"; // update it after copy, reference your custom theme variables

// NOTE: strict copy of BS4  @mixin form-control-focus()  from mixins/_forms.scss
// NOTE: there are changes in form-control-focus in BS5 (depricated?)
// NOTE: ask Bootstrap team to add .focus class to the framework
@mixin form-control-focus-bsmultiselect() {
    &.focus { // .focus instead of :focus
        color: $input-focus-color;
        background-color: $input-focus-bg;
        border-color: $input-focus-border-color;
        outline: 0;
        @if $enable-shadows {
            box-shadow: $input-box-shadow, $input-focus-box-shadow;
        } @else {
            box-shadow: $input-focus-box-shadow;
        }
    }
}

// NOTE: .was-validated support for ul.form-control, done by analogy to @form-validation-state
//       that call  @include form-validation-state-selector($state) mixins/_forms.scss
@mixin form-validation-state-bsmultiselect($state, $color) {
    ul.form-control{
        .was-validated &:#{$state},
        &.is-#{$state} {
            border-color: $color;
            &.focus { // .focus instead of :focus
                border-color: $color;
                box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
            }
        }
    }
}

.dashboardcode-bsmultiselect {
    // JS css/cssPatch: picks
    ul.form-control {
        display: flex;
        flex-wrap: wrap;
        height: auto;
        min-height: #{$input-height};
        margin-bottom: 0;
        cursor: text;
        list-style-type: none;
        
        input {
            height: auto;
            padding: 0;
            margin: 0;
            font-weight: inherit;
            color: inherit;
            background-color: transparent;
            border: 0;
            outline: none;
            box-shadow: none;
        }
        &.disabled{
            background-color: $input-disabled-bg;
        }
        &::placeholder {
            color: $input-placeholder-color;
            // NOTE: CopyPaste from BS - override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
            opacity: 1;
        }
        // pickButton: {fontSize:'0.8em',  float : "none", verticalAlign: "text-top"},

        // JS css/cssPatch: pick
        > li.badge {
            padding-left: 0;
            padding-inline-start: 0;
            padding-inline-end: .5rem;
            color: var(--bs-dark);
            button.btn-close {
                float: none;
                font-size: .8em;
            }
            span.disabled {
                opacity: $btn-disabled-opacity;
            }
        }

        @include form-control-focus-bsmultiselect();

        &.form-control-sm {
            min-height: #{$input-height-sm};
            input{
                font-size: $font-size-sm;
            }
        }
    
        &.form-control-lg {
            min-height: #{$input-height-lg};
            input{
                font-size: $font-size-lg;
            }
        }
    }
    @include form-validation-state-bsmultiselect("valid", $form-feedback-valid-color);
    @include form-validation-state-bsmultiselect("invalid", $form-feedback-invalid-color);

    // JS css/cssPatch: choices
    div.dropdown-menu {
        > ul {
            list-style-type: none;
            padding-left: 0;
            padding-right: 0;
            margin-bottom: 0;
            // JS css/cssPatch: choice
            > li {
                // NOTE: next block copied from .dropdown-item to have similar styles
                display: block;
                width: 100%;
                padding: 0 map.get($spacers, 2); // NOTE: overrides BS $dropdown-item-padding-x; because it is too large
                clear: both;
                font-weight: $font-weight-normal;
                color: $dropdown-link-color;
                text-align: inherit;

                white-space: nowrap;
                background-color: transparent;
                border: 0;
                cursor: pointer;
                .form-check{ // BS problem: without this dropdown menu's custom checkboxes on inline form justified center
                    cursor: inherit;
                    justify-content: flex-start; // 'initial' works well but not for IE11
                    .form-check-label, .form-check-input{
                        cursor: inherit;
                    }
                }
                &.disabled .form-check-label { 
                    opacity: $form-check-input-disabled-opacity; //  $custom-control-label-disabled-color; 
                }
                &.hover{ // from bs4 _dropdown.scss
                    @include gradient-bg($dropdown-link-hover-bg);
                }
                &.hover:not(.disabled){
                    color: var(--bs-primary); //$dropdown-link-hover-color;
                }
                &.hover.selected{
                    color: var(--bs-primary); //$dropdown-link-hover-color;
                }
            }
        }
    
        +div.alert-warning {
            padding-left: .25rem;
            padding-right: .25rem;
            z-index: 4;  
            font-size:small; 
        }
    }

    &.input-group.input-group-sm {
        ul.form-control {
            min-height: #{$input-height-sm};
            input{
                font-size: $font-size-sm;
            }
        }
    }

    &.input-group.input-group-lg {
        ul.form-control {
            min-height: #{$input-height-lg};
            input{
                font-size: $font-size-lg;
            }
        }
    }
}

.form-floating{
    .dashboardcode-bsmultiselect{
        ul.form-control{
            min-height: calc(3.5rem + 2px);

            &.floating-lifted{
                padding-top: 1.625rem;
                padding-left: 0.7rem;
                padding-bottom: 0;
            }
        } 

        +label.floating-lifted{
            opacity: .65; 
            transform: scale(.85) translateY(-.5rem) translateX(.15rem); 
        }
    }
}

// From this I am solving BS4 .was-validated problem: impossibility to exclude custom checkboxes from validation styling.
// So there we redefine pseudoclasses :valid:checked and :valid:not(:checked) - our options are allready valid.
// Note: nested form for dropdown with 'novalidate ' attribute possibly could solve it but nested forms are not allowed

// 1. reset "coloring"  (for both checked and uchecked) labels
.was-validated .dashboardcode-bsmultiselect div.dropdown-menu  > ul > li .form-check-input:valid:checked ~ .form-check-label,
.was-validated .dashboardcode-bsmultiselect div.dropdown-menu  > ul > li .form-check-input:valid:not(:checked) ~ .form-check-label {
    color: $dropdown-link-color;
}

// 2. but use different color for hovered item (for both checked and uchecked) labels
.was-validated .dashboardcode-bsmultiselect div.dropdown-menu > ul > li.hover .form-check-input:valid:checked ~ .form-check-label,
.was-validated .dashboardcode-bsmultiselect div.dropdown-menu > ul > li.hover .form-check-input:valid:not(:checked) ~ .form-check-label{
    color: var(--bs-primary);
}

// 3. reset "coloring" for checkbox ('checked' and 'not(:checked)')
.was-validated .dashboardcode-bsmultiselect  div.dropdown-menu > ul > li .form-check-input:valid:checked  {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
}
.was-validated .dashboardcode-bsmultiselect  div.dropdown-menu > ul > li .form-check-input:valid:not(:checked) {
    border: $form-check-input-border;
}