:root {
    --theme-select-height: 45px;
    --theme-select-gutter-left: 8px;
    --theme-select-bg: #f6f5f4;
    --theme-select-bg-accent: #929394;
    --theme-select-color-accent: var(--clr-white);
    --theme-select-color: #2d2d2d;
    --theme-select-shevron-color: #2d2d2d;
    --theme-select-selection-fs: 13px;
    --theme-select-option-fs: 14px;
    --theme-select-selection-fw: 600;
    --theme-select-arrow-size: 24px;
    --theme-select-border-color: transparent;
    --theme-select-border-focus-color: #2d2d2d;
    --theme-select-border-size: 2px;
    --theme-select-dropdown-height: 320px;
    --theme-select-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='30' viewBox='0 0 50 30'%3E%3Cpath d='M24.8 29.1L0 4.2 4.2 0l20.6 20.6L45.4 0l4.3 4.2-24.9 24.9z' fill='white'/%3E%3C/svg%3E");
}

/**
* select2: custom settings
* https://select2.org
*/
.select2-container .theme-select.select2-dropdown,
.select2-container .theme-select.select2-dropdown .select2-search--dropdown,
.select2-container .theme-select.select2-dropdown .select2-search__field,
.select2-container .theme-select.select2-selection,
.select2-container .theme-select.select2-selection .select2-selection__arrow {
    border: 0;
    border-radius: 0;
}

.select2-container .theme-select.select2-selection--single {
    height: var(--theme-select-height);
    border: var(--theme-select-border-size) solid var(--theme-select-border-color);
}

.select2-container--disabled .theme-select.select2-selection {
    opacity: 0.7;
}

.select2-container .theme-select .select2-search__field {
    font-size: var(--theme-select-selection-fs);
    font-family: inherit;
}

.select2-container .theme-select .select2-search__field::placeholder {
    color: var(--theme-select-color);
}

.select2-container .theme-select.select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--theme-select-height) - var(--theme-select-border-size) * 2);
    padding-left: var(--theme-select-gutter-left);
    padding-right: var(--theme-select-arrow-size);
}

.select2-container .theme-select.select2-selection .select2-selection__rendered {
    font-weight: var(--theme-select-selection-fw);
    font-size: var(--theme-select-selection-fs);
}

.select2-container .theme-select.select2-dropdown .select2-search--dropdown {
    padding: 8px;
}

.select2-container .theme-select.select2-selection .select2-selection__arrow {
    width: var(--theme-select-arrow-size);
    height: var(--theme-select-height);
}

.select2-container .theme-select.select2-selection .select2-selection__arrow b {
    border: 0;
    color: var(--theme-select-shevron-color);
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    margin: 0;
    display: inline-flex;
}

.select2-container.select2-container--open .theme-select.select2-selection--single {
    border-color: var(--theme-select-border-focus-color);
}

.select2-container.select2-container--open .theme-select .select2-selection__arrow b::after {
    transform: scaleY(-1);
}

.select2-container .theme-select.select2-selection .select2-selection__arrow b::after {
    content: "\f107";
    -webkit-font-smoothing: antialiased;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.select2-container .theme-select.select2-dropdown .select2-results__option {
    line-height: 1.2;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: var(--theme-select-option-fs);
}

.select2-container .theme-select.select2-dropdown,
.select2-container .theme-select.select2-selection {
    background-color: var(--theme-select-bg);
}

.select2-container .theme-select.select2-selection .select2-selection__rendered,
.select2-container .theme-select.select2-dropdown .select2-results__option {
    color: var(--theme-select-color);
}

.select2-container .theme-select.select2-dropdown .select2-results__option--highlighted,
.select2-container .theme-select.select2-dropdown .select2-results__option--selected {
    background-color: var(--theme-select-bg-accent);
}

.select2-container .theme-select.select2-dropdown .select2-results__option--highlighted,
.select2-container .theme-select.select2-dropdown .select2-results__option--selected {
    color: var(--theme-select-color-accent);
}

/* multiple */
.select2-container .theme-select.select2-selection--multiple {
    min-height: var(--theme-select-height);
}

.select2-container .theme-select.select2-selection--multiple .select2-selection__choice__remove {
    border: 0;
    background-color: transparent;
    height: 100%;
    padding: 0 6px;
    font-weight: normal;
    color: var(--clr-white);
}

.select2-container .theme-select.select2-selection--multiple .select2-selection__choice {
    background-color: var(--theme-select-bg-accent);
    border: 0;
    color: var(--theme-select-color-accent);
}

.select2-container .theme-select.select2-selection--multiple .select2-selection__choice__display {
    padding-right: 8px;
}

.select2-container .theme-select.select2-selection--multiple .select2-search__field {
    margin-left: var(--theme-select-gutter-left);
}

/* Theme scrollbar for select dropdown */
.select2-container .theme-select.select2-dropdown .select2-results__options {
    scrollbar-width: thin;
    scrollbar-color: var(--theme-select-bg-accent) transparent;
    max-height: var(--theme-select-dropdown-height);
}

.theme-select__dropdown .select2-results__options::-webkit-scrollbar {
    width: 6px;
}

.theme-select__dropdown .select2-results__options::-webkit-scrollbar-track {
    background: transparent;
}

.theme-select__dropdown .select2-results__options::-webkit-scrollbar-thumb {
    background-color: var(--theme-select-bg-accent);
    border-radius: 10px;
}

/**
* select2: themes colors
*/

/* select2: Light theme */
.select2-container .theme-select.theme-select--light {
    --theme-select-bg: var(--clr-blue-100);
    --theme-select-shevron-color: var(--clr-blue-200);
    --theme-select-color: var(--clr-blue-200);
    --theme-select-bg-accent: var(--clr-blue-200);
    --theme-select-border-size: 0px;
}

/* select2: Dark theme */
.select2-container .theme-select.theme-select--dark {
    --theme-select-bg: var(--clr-green-100);
    --theme-select-shevron-color: var(--clr-white);
    --theme-select-color: var(--clr-white);
    --theme-select-bg-accent: var(--clr-green-200);

    --theme-select-height: 54px;
    --theme-select-gutter-left: 26px;
    --theme-select-selection-fs: 14px;
    --theme-select-selection-fw: 400;
    --theme-select-arrow-size: 45px;
}

.select2-container .theme-select.theme-select--dark .select2-selection__arrow b::after {
    font-size: 0;
    -webkit-mask-image: var(--theme-select-arrow-icon);
    mask-image: var(--theme-select-arrow-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--theme-select-shevron-color);
}

/**
* select2: additional settings
*/
.form-group:has(.theme-select)::after {
    opacity: 0;
    pointer-events: none;
}

/* hook with admin bar (fix dropdown position) */
body.admin-bar .select2-container--open .theme-select.select2-dropdown {
    margin-top: var(--wp-admin--admin-bar--height, 32px);
}