/*!
 * Copyright (c) 2022.
 * Author Peter Placzek (tada5hi)
 * For the full copyright and license information,
 * view the LICENSE file that was distributed with this source code.
 */

@import "bootstrap/scss/functions";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/variables";

$multy-select-padding-y: 0.375em !default;
$multy-select-padding-x: 0.75em !default;
$multy-select-height: $input-height !default;
$multy-select-line-height: $input-btn-line-height !default;
$multy-select-color: $input-color !default;
$multy-select-disabled-color: $gray-600 !default;
$multy-select-bg: $input-bg !default;
$multy-select-disabled-bg: $gray-200 !default;
$multy-select-bg-size: 8px 10px !default; // In pixels because image dimensions
$multy-select-indicator-color: $gray-800 !default;
$multy-select-indicator: str-replace(
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$multy-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"),
"#",
"%23"
)
!default;
$multy-select-border-width: $input-btn-border-width !default;
$multy-select-border-color: $input-border-color !default;
$multy-select-border-radius: $border-radius !default;

$multy-select-font-size-sm: 75% !default;
$multy-select-height-sm: $input-height-sm !default;

$multy-select-font-size-lg: 125% !default;
$multy-select-height-lg: $input-height-lg !default;

.multiselect {
    outline: none;
    .multiselect-tags {
        font-size: $font-size-base;

        display: flex;
        width: 100%;
        min-height: $multy-select-height;
        line-height: $multy-select-line-height;
        color: $multy-select-color;
        vertical-align: middle;
        background: $multy-select-bg;
        border: $multy-select-border-width solid $multy-select-border-color;

        @if $enable-rounded {
            // Manually use the if/else instead of the mixin to account for iOS override
            border-radius: $input-border-radius;
    } @else {
        // Otherwise undo the iOS default
        border-radius: 0;
    }
}
}

// the tags and search input wrapper
.multiselect-tags-list {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    width: 1px;
    align-items: center;
    padding: $multy-select-padding-y/2 $multy-select-padding-x/2;
    text-align: left;

    .multiselect-input,
    .multiselect-single {
        position: relative;
        display: inline-block;
        border: none;
        width: calc(100%);
        transition: border 0.1s ease;
        box-sizing: border-box;
        padding: $multy-select-padding-y/2 $multy-select-padding-x/2;
        font-family: inherit;
        font-size: $font-size-base;
        line-height: $multy-select-line-height;
        touch-action: manipulation;
}

    .multiselect-tags-list-addon {
        padding: $multy-select-padding-y/2 $multy-select-padding-x/2;
        font-family: inherit;
        font-size: $font-size-base;
        line-height: $multy-select-line-height;
}

    .multiselect-input {
        max-width: 100%;
        &::placeholder {
            color: $input-placeholder-color;
    }
        &:focus {
            outline: none;
    }
}

    .multiselect-placeholder {
        color: #adadad;
        display: inline-block;
        padding: $multy-select-padding-y/2 $multy-select-padding-x/2;
}

    .multiselect-tag ~ .multiselect-input,
    .multiselect-tag ~ .multiselect-single {
        width: auto;
}
}

.multiselect-tags-append {
    cursor: pointer;
    width: 1.5em;
    align-self: stretch;
    background: $multy-select-indicator no-repeat center;
    background-size: $multy-select-bg-size;
}

.multiselect-tag {
    margin-right: $multy-select-padding-y;
    margin-bottom: $multy-select-padding-y/2;
    margin-top: $multy-select-padding-y/2;
    display: flex;
    span {
        padding: $badge-padding-y $badge-padding-x;
        font-size: $badge-font-size;
        font-weight: $badge-font-weight;
        @include border-left-radius($badge-border-radius);
}
    .multiselect-tag-remove {
        @include border-right-radius($badge-border-radius);
        padding: $badge-padding-y $badge-padding-x;
        font-size: $badge-font-size;
        font-weight: $badge-font-weight;
        cursor: pointer;
        align-content: center;
}
}

@mixin multiselect-tag-variant($bg) {
    span {
        color: color-yiq($bg);
        background-color: $bg;
}
    .multiselect-tag-remove {
        color: color-yiq($bg);
        background-color: $bg;
        @include hover-focus {
            transition: background-color ease 0.4s;
            background-color: darken($bg, 20%);
            color: color-yiq($bg);
            text-decoration: none;
    }
        &:after {
            content: "×";
            font-style: normal;
            line-height: 1em;
    }
}
}

.multiselect-tag-default {
    @include multiselect-tag-variant($secondary);
}

@each $color, $value in $theme-colors {
    .multiselect-tag-#{$color} {
        @include multiselect-tag-variant($value);
}
}

// //

.multiselect-option {
    display: block;
    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
    clear: both;
    font-weight: $font-weight-normal;
    color: $dropdown-link-color;
    white-space: nowrap; // prevent links from randomly breaking onto new lines

    width: 100%;
    text-align: inherit;
    background-color: transparent;
    border: 0;

    &.selected {
        font-weight: bold;
}

    &.focused {
        color: $dropdown-link-hover-color;
        text-decoration: none;
        @include gradient-bg($dropdown-link-hover-bg);
}

    &.active,
    &:active {
        color: $dropdown-link-active-color;
        text-decoration: none;
        @include gradient-bg($dropdown-link-active-bg);
}

    &.disabled,
    &:disabled {
        color: $dropdown-link-disabled-color;
        background-color: transparent;
        // Remove CSS gradients if they're enabled
        @if $enable-gradients {
            background-image: none;
    }
}

    &.multiselect-option-header {
        font-size: 0.7em;
}
}

// // states

.multiselect.disabled {
    pointer-events: none;
    .multiselect-tags {
        color: $multy-select-disabled-color;
        background-color: $multy-select-disabled-bg;
}
}

.multiselect.active {
    z-index: 50;
    .multiselect-tags {
        border-color: $custom-select-focus-border-color;
        outline: 0;
        box-shadow: $custom-select-focus-box-shadow;

        &::-ms-value {
            // For visual consistency with other platforms/browsers,
            // suppress the default white text on blue background highlight given to
            // the selected option text when the (still closed) <select> receives focus
            // in IE and (under certain conditions) Edge.
            // See https://github.com/twbs/bootstrap/issues/19398.
            color: $input-color;
            background-color: $input-bg;
    }
}
    .multiselect-placeholder {
        display: none;
}
}

// // sizes

.multiselect-sm {
    .multiselect-single,
    .multiselect-input,
    .multiselect-tag,
    .multiselect-tags-list-addon {
        font-size: $multy-select-font-size-sm;
}
    .multiselect-tags {
        min-height: $multy-select-height-sm;
}
}

.multiselect-lg {
    .multiselect-single,
    .multiselect-input,
    .multiselect-tag,
    .multiselect-tags-list-addon {
        font-size: $multy-select-font-size-lg;
}
    .multiselect-tags {
        min-height: $multy-select-height-lg;
}
}

// // input group

.input-group > .multiselect {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;

    &:not(:last-child) {
        .multiselect-tags {
            @include border-right-radius(0);
    }
}
    &:not(:first-child) {
        .multiselect-tags {
            @include border-left-radius(0);
    }
}
}