/* Base Custom Select Styles */
.custom-select {
    position: relative;
    font-family: var(--font-family-base);
    width: 100%;
}

.custom-select select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
}

/* Selected Item Base */
.select-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border: 1px solid transparent;
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: normal;
    cursor: pointer;
    position: relative;
    border-radius: var(--border-radius-sm);
}

.select-selected::after {
    content: "";
    position: absolute;
    right: 16px;
    width: 10px;
    height: 6px;
    background-image: url('../../assets/icons/solid/down.svg');
    background-size: cover;
    transition: transform 0.3s;
    background-position: center;
}

[data-theme="light"] .select-selected::after {
    filter: brightness(0) saturate(100%);
}

.select-selected.select-arrow-active::after {
    transform: rotate(180deg);
}

.select-selected.select-arrow-active {
    border: 1px solid var(--color-primary);
}

/* Options Container */
.select-items {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-md);
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

.custom-select--dark .select-items {
    background-color: var(--color-secondary);
}

.custom-select--black .select-items {
    background-color: var(--color-black);
}

.custom-select--accent .select-items {
    background-color: var(--color-accent);
}

.select-hide {
    display: none;
}

/* Option Items */
.select-items div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: normal;
    cursor: pointer;
    transition: background-color 0.3s;

    height: 43px;
}

/* the checkmark */
.custom-select--checkmark .select-items div.same-as-selected::after {
    content: '';
    width: 12px;
    height: 9px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="9" viewBox="0 0 12 9" fill="none"%3E%3Cpath d="M10.3667 1.04167L4.80007 6.60834L1.56674 3.37501C1.41061 3.2198 1.1994 3.13268 0.979241 3.13268C0.759086 3.13268 0.547876 3.2198 0.391741 3.37501C0.236532 3.53114 0.149414 3.74235 0.149414 3.96251C0.149414 4.18266 0.236532 4.39387 0.391741 4.55001L4.21674 8.37501C4.37288 8.53022 4.58409 8.61733 4.80424 8.61733C5.02439 8.61733 5.23561 8.53022 5.39174 8.37501L11.5417 2.22501C11.6198 2.14754 11.6818 2.05537 11.7241 1.95382C11.7665 1.85227 11.7882 1.74335 11.7882 1.63334C11.7882 1.52333 11.7665 1.41441 11.7241 1.31286C11.6818 1.21131 11.6198 1.11914 11.5417 1.04167C11.3856 0.886465 11.1744 0.799347 10.9542 0.799347C10.7341 0.799347 10.5229 0.886465 10.3667 1.04167Z" fill="%23016BFF"/%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 8px;
}

/* Rounded Corners for First and Last Items */
.select-items div:first-child {
    border-top-left-radius: var(--border-radius-sm);
    border-top-right-radius: var(--border-radius-sm);
}

.select-items div:last-child {
    border-bottom-left-radius: var(--border-radius-sm);
    border-bottom-right-radius: var(--border-radius-sm);
}

/* Contextual Variants */

.custom-select .select-selected.select-arrow-active {
    border: 1px solid var(--color-primary);
}

/* Variant: Model One: Dark input with accent border */
.custom-select--dark .select-selected {
    background-color: var(--color-secondary);
    border: 1px solid var(--color-accent);
    color: var(--color-text);
}

.custom-select--dark .select-selected::after {
    filter: grayscale(100%) brightness(50%);
}

.custom-select--dark .select-selected.selected::after {
    filter: none;
}

[data-theme="light"] .custom-select--dark .select-selected.selected::after {
    filter: brightness(0) saturate(100%);
}

.custom-select--dark .select-items div {
    background-color: var(--color-secondary);
    color: var(--color-support-alt);
}

.custom-select--dark .select-items div:hover,
.custom-select--dark .select-items div.same-as-selected,
.custom-select--dark .select-items div.keyboard-focused {
    background-color: var(--color-hover-action);
}

.custom-select--dark .select-items div.same-as-selected,
.custom-select--dark .select-items div.keyboard-focused {
    color: var(--color-primary);
}

.custom-select--dark .select-selected.selected {
    color: var(--color-secondary-alt);
}

/* Variant: Model Two: Borderless black input */
.custom-select--black .select-selected,
.custom-select--black .select-items div {
    background-color: var(--color-black);
    color: var(--color-support-alt);
}

.custom-select--black .select-items div:hover,
.custom-select--black .select-items div.keyboard-focused {
    background-color: var(--color-hover-action);
}

.custom-select--black .select-items div.same-as-selected,
.custom-select--black .select-items div.keyboard-focused {
    background-color: var(--color-hover-action);
    color: var(--color-primary);
}

.custom-select--black .select-selected.selected {
    color: var(--color-secondary-alt);
}

/* Variant: Model Three: Accent background input */
.custom-select--accent .select-selected {
    color: var(--color-text);
    background-color: var(--color-accent);
}

.custom-select--accent .select-selected::after {
    filter: grayscale(100%) brightness(50%);
}

.custom-select--accent .select-selected.selected::after {
    filter: none;
}

[data-theme="light"] .custom-select--accent .select-selected.selected::after {
    filter: brightness(0) saturate(100%);
}

.custom-select--accent .select-items div {
    color: var(--color-text);
    background-color: var(--color-accent);
}

.custom-select--accent .select-items div.same-as-selected,
.custom-select--accent .select-items div:hover,
.custom-select--accent .select-items div.keyboard-focused {
    background-color: var(--color-hover-action);
    color: var(--color-support-alt);
}

.custom-select--accent .select-selected.selected {
    color: var(--color-secondary-alt);
}

/* Variant: Language Dropdown (Squared top, rounded bottom, border only on dropdown) */
.custom-select--lang .select-selected {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
    border: 1px solid transparent;
}
.custom-select--lang .select-items {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border: 1px solid var(--color-primary);
    border-top: none;
    box-shadow: none;
    margin-top: 0;
}
.custom-select--lang .select-items div.option:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.custom-select--lang .select-items div.option:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Size Variants */

/* Large Size (50px) */
.custom-select--lg .select-selected {
    height: 50px;
    font-size: 18px;
}

.custom-select--lg .select-selected::after {
    width: 20px;
    height: 10px;
}

@media (max-width: 1024px) {
    .custom-select--lg .select-selected {
        height: 43px;
        font-size: 16px;
    }

    .custom-select--lg .select-selected::after {
        width: 15px;
        height: 7px;
    }
}

/* Medium Size (43px) */
.custom-select--md .select-selected {
    height: 43px;
    font-size: 16px;
}

.custom-select--md .select-selected::after {
    width: 15px;
    height: 7px;
}

/* Multi-select Apply Button */
.apply-button {
    width: 100%;
    padding: 10px 16px;
    height: 50px;
    background-color: var(--color-primary);
    color: var(--color-secondary-alt);
    font-family: var(--font-family-base);
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    border: none;
    border-bottom-left-radius: var(--border-radius-sm);
    border-bottom-right-radius: var(--border-radius-sm);
}

@media (max-width: 768px) {
    .apply-button {
        height: 43px;
        font-size: 16px;
    }
}

/* Scroll bar style */
.select-items {
    max-height: 258px; /* 43 * 6(item) */ /* Set the maximum height */
    overflow-y: auto; /* Enable vertical scrolling */
}

.select-items div.option {
    border-right: none
}

.iti__country-list::-webkit-scrollbar,
.select-items::-webkit-scrollbar {
    margin-right: 2px;
    width: 8px;
    background-color: var(--color-secondary);
    border-radius: 6px;
}

/* Scrollbar Thumb */
.iti__country-list::-webkit-scrollbar-thumb ,
.select-items::-webkit-scrollbar-thumb {
    background-color: var(--color-support);
    border-radius: 6px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

/* Scrollbar Track */
.iti__country-list::-webkit-scrollbar-track,
.select-items::-webkit-scrollbar-track {
    background-color: var(--color-black); /* default */
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Contextual Variants */
.custom-select--dark .select-items::-webkit-scrollbar-track {
    background-color: var(--color-secondary);
}
.custom-select--black .select-items::-webkit-scrollbar-track {
    background-color: var(--color-black);
}
.custom-select--accent .select-items::-webkit-scrollbar-track {
    background-color: var(--color-accent);
}

.custom-select.error .select-selected {
    border: 1px solid var(--color-warning);
}

.custom-select.error {
    padding-bottom: 0;
}