//
// Choise.scss
//

// Override for Choices.js styling using CSS variables


.choices {
    margin-bottom: 10px !important;
    // min-width: 150px;
    .choices__inner {
        background-color: $input-bg;
        padding: $input-padding-y $input-padding-x;
        border-color: var(--#{$prefix}border-color);
        border-radius: var(--#{$prefix}border-radius);
        font-size: $font-size-base;
        min-height: auto;

        .choices__list--single {
            padding: 0;
        }

        .choices__input {
            background-color: $input-bg;
            margin-bottom: 0;
            padding: 0;
        }

        .choices__list {
            &.choices__list--multiple {
                .choices__item {
                    background-color: var(--#{$prefix}primary-bg-subtle);
                    color: var(--#{$prefix}primary);
                    border-color: var(--#{$prefix}primary);

                    .choices__button {
                        position: relative;
                        opacity: 1;
                        background-image: none;
                        border: none;

                        &::before {
                            content: '';
                            position: absolute;
                            top: 50%;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            transform: translateY(-50%);
                            opacity: 0.6;
                            height: 80%;
                            border-left: 1px solid var(--#{$prefix}primary);
                            pointer-events: none;
                            // z-index: 1;
                        }

                        &::after {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;

                            mask-repeat: no-repeat;
                            mask-position: center;
                            -webkit-mask-repeat: no-repeat;
                            -webkit-mask-position: center;
                            background-color: var(--#{$prefix}primary);
                            $bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z'%3E%3C/path%3E%3C/svg%3E");
                            mask-image: $bg-image;

                            z-index: 0;
                        }
                    }
                }
            }
        }
    }

    .choices__list {
        &.choices__list--dropdown {
            border-color: var(--#{$prefix}border-color);
            box-shadow: 0 4px 24px 0 rgba(62, 57, 107, 0.18);
            border-radius: $border-radius;
        }

        &[aria-expanded] {
            border-color: var(--#{$prefix}border-color);

            .choices__list {
                padding: $dropdown-padding-x $dropdown-padding-y;

                .choices__item {
                    border-radius: var(--#{$prefix}border-radius);
                    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
                }
            }
        }

    }

    &[data-type*=select-one] {
        .choices__input {
            border-color: var(--#{$prefix}border-color);
            background-color: $input-bg;
            padding: $input-btn-padding-y $input-btn-padding-x;
            font-size: $input-font-size-sm;
        }

        &::after {
            font-family: 'remixicon', sans-serif; // Use Remix font family
            content: "\ea4e";
            border: none;
            vertical-align: middle;
            font-size: 20px;
            line-height: 0;
            margin-top: 0;
            right: 30px;
            transform: translateY(-50%);
        }
    }

    &.is-open {
        &[data-type*=select-one] {
            &::after {
                margin-top: 0;
                border: none;
                right: 11.5px;
                transform: translateY(-50%) rotate(180deg);
            }
        }
    }

}

[dir="rtl"] {
    .choices {
        &[data-type*=select-one] {
            .choices__button {
                right: auto;
                left: 32px;
            }

            &::after {
                right: auto;
                left: 30px;
            }
        }

        &.is-open {
            &[data-type*=select-one] {
                &::after {
                    right: auto;
                    left: 11.5px;
                }
            }
        }
    }

    .choices__inner {

        .choices__list {
            &.choices__list--multiple {
                .choices__item {
                    .choices__button {
                        padding-left: 0;
                        padding-right: 20px;
                        margin: 0 8px 0 -6px;

                        &::before {
                            content: '';
                            left: auto;
                            right: 0;
                            border-left: 0;
                            border-right: 1px solid var(--#{$prefix}primary);
                        }
                    }
                }
            }
        }
    }
}