// Functions
@function getColor($color_name, $map: $colors) {
    @return map-get($map, $color_name);
}

@mixin blurry-text {
    .blurry-text {
        color: transparent;
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }
}

/* Box Shadow */
@mixin shadow1 {
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
        0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06),
        0 22.3px 17.9px rgba(0, 0, 0, 0.072),
        0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
}
@mixin shadow2 {
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
        0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06),
        0 22.3px 17.9px rgba(0, 0, 0, 0.072),
        0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
}
@mixin shadow3 {
    -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.27);
    -moz-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.27);
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.27);
}

/**
** For Select2
*/
@mixin select2 {
    span.select2 {
        border-radius: 5px;
        border: 1px solid #e2e2e2;
        width: 100% !important;
    }

    .select2-container {
        max-width: 100% !important;
    }

    // padding: 0.375rem 0.75rem;
    // height: 45px;

    span.selection {
        span.select2-selection--single {
            // height: 30px !important;
            // padding: 2px 10px !important;
            height: 45px !important;
            padding: 0px 0.75rem 0.375rem 0.75rem !important;
            border-radius: 6px !important;
            border-bottom: 2px solid color(dark-red-2) !important;

            //border-radius: 20px;
            span.select2-selection__arrow {
                padding-right: 10%;
                top: 8px !important;
            }

            &.is-invalid,
            &.was-validated {
                border-color: #dc3545 !important;
            }

            &.is-valid,
            &.was-validated {
                border-color: #198754 !important;
            }
        }

        span.select2-selection__rendered {
            font-size: 15px !important;
        }
    }

    span.select2-dropdown {
        span.select2-search {
            input.select2-search__field,
            input.select2-search__field:focus,
            input.select2-search__field:active {
                border-radius: 10px !important;
            }
        }

        span.select2-results {
            ul {
                li {
                }
                li:hover {
                    background-color: color(red);
                    color: color(white);
                }
                li:active {
                    color: color(blue2);
                }
            }
        }
    }
}

/**
** Live wire Select
*/
@mixin liveselect2 {
    /* Target the SVG inside Select2 dropdown arrow */
    svg.pointer-events-none {
        // position: absolute;
        // top: 50%;
        // right: 10px;
        // transform: translateY(-50%);
        // width: 16px;
        // height: 16px;
        // color: #6b7280; /* gray-500 */
        // pointer-events: none;
        display: none;
    }

    /* Hide clear button in single-select mode */
    .select2-container:not(.select2-container--multiple)
        .select2-selection__clear {
        display: none !important;
    }

    span.select2 {
        border-radius: 0.375rem; /* Matches rounded-md */
        border: 1px solid #e2e2e2;
        width: 100% !important;
    }

    .select2-container {
        max-width: 100% !important;
    }

    .select2-container--default
        .select2-selection--multiple
        .select2-selection__choice__display {
        cursor: default;
        padding-left: 15px !important;
        padding-right: 5px !important;
    }

    .select2-selection--multiple .select2-selection__rendered {
        padding-left: 1px !important;
    }

    span.selection span.select2-selection--multiple,
    span.selection span.select2-selection--single {
        padding: 1px 2px !important;
    }

    .select2-container .select2-search--inline .select2-search__field {
        height: 1.375rem !important;
    }

    span.selection {
        span.select2-selection--multiple,
        span.select2-selection--single {
            min-height: 2.375rem !important; /* Matches py-1.5 */
            padding: 0.375rem 0.75rem !important;
            border-radius: 0.375rem !important; /* Matches rounded-md */
            border: 1px solid #d1d5db !important; /* Matches outline-gray-300 */
            outline: 1px solid #d1d5db !important;
            outline-offset: -1px !important;
            background-color: #fff; /* Matches bg-white */

            &:focus {
                outline: 2px solid #4f46e5 !important; /* Matches outline-indigo-600 */
                outline-offset: -2px !important;
            }

            span.select2-selection__arrow {
                top: 8px !important;
                right: 8px !important; /* Matches pr-8 */
            }
        }

        span.select2-selection__rendered {
            font-size: 0.875rem !important; /* Matches sm:text-sm */
            line-height: 1.5rem !important; /* Matches sm:text-sm/6 */
            color: #111827 !important; /* Matches text-gray-900 */
        }
    }

    span.select2-dropdown {
        span.select2-search {
            input.select2-search__field,
            input.select2-search__field:focus,
            input.select2-search__field:active {
                border-radius: 0.375rem !important;
                font-size: 0.875rem !important;
            }
        }

        span.select2-results {
            ul {
                li {
                    font-size: 0.875rem !important;
                }
                li:hover {
                    background-color: #4f46e5; /* Indigo color to match focus */
                    color: #fff;
                }
            }
        }
    }

    /* Handle multi-select specific styling */
    .select2-selection--multiple {
        .select2-selection__rendered {
            padding-left: 0.5rem !important;
            display: flex !important;
            flex-wrap: wrap !important;
        }

        .select2-search__field {
            margin-top: 0 !important;
            margin-left: 0 !important;
            width: 100% !important;
        }

        .select2-selection__choice {
            background-color: #f3f4f6 !important;
            border: 1px solid #d1d5db !important;
            border-radius: 0.25rem !important;
            padding: 0.125rem 0.5rem !important;
            margin-right: 0.25rem !important;
            margin-top: 0.25rem !important;
        }

        .select2-selection__choice__remove {
            color: #6b7280 !important;
            margin-right: 0.25rem !important;

            &:hover {
                color: #111827 !important;
            }
        }
    }
}
