/* ─── Imports ───────────────────────────────────── */

@import url("root.css");

/* ─── Component Styles ──────────────────────────── */

.custom-select {
    position: relative;
}

.custom-select select {
    display: none;
}

.select-selected,
.select-items {
    padding: 14px 18px;

    background-color: var(--select-bg, var(--white-container));

    color: var(--select-text-color, var(--grey-333));
    border: 1.5px solid var(--select-border-color);
    border-radius: var(--border-radius);
    font-size: var(--small);
}

.select-selected:after {
    content: "";
    position: absolute;
    top: calc(50% - 8px);
    right: 18px;

    width: 16px;
    height: 16px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23495057' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    cursor: pointer;
}

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

.select-items {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 99;

    margin-top: 10px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.17);
}

.select-items div,
.dropdown-item {
    padding: 8px 16px;

    color: var(--select-item-color, var(--grey-333));
    border-radius: var(--small-border);

    cursor: pointer;
    user-select: none;
}

.select-items div:last-child {
    border-bottom: none;
}

.select-items div:hover,
.same-as-selected {
    background-color: var(--select-hover-bg, rgba(0, 0, 0, 0.1));

    color: var(--select-hover-color, inherit);
}

.select-hide {
    display: none;
}

.dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;

    display: flex;
    visibility: hidden;
    flex-direction: column;
    opacity: 0;

    width: 200px;
    margin-top: 5px;
    padding: var(--small) calc(var(--small) / 2);
    border: 1.5px var(--white-d) solid;
    border-radius: var(--border-radius);

    background-color: var(--white-container);

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.17);

    pointer-events: none;
    transform: translateY(-10px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0s linear 0.2s;
}

.dropdown.show {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0s linear 0s;
}

.dropdown-item {
    gap: var(--small);

    font-size: var(--small);
}

.dropdown-item:hover {
    background-color: var(--select-hover-bg, rgba(0, 0, 0, 0.1));

    color: var(--select-hover-color, inherit);
}

.autocomplete-container {
    position: relative;

    display: inline-block;
    width: 100%;
}

.autocomplete-suggestions {
    position: absolute;
    z-index: 99;

    width: 100%;
    max-height: 200px;
    margin-top: 8px;
    padding: var(--small-border);
    border: 1.5px solid var(--select-border-color);
    border-radius: var(--border-radius);

    background-color: var(--select-bg, var(--white-container));

    color: var(--select-text-color, var(--grey-333));
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    scrollbar-width: thin;
    scrollbar-color: var(--select-border-color) transparent;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.autocomplete-suggestions:empty {
    display: none;
}

.autocomplete-suggestions::-webkit-scrollbar {
    width: var(--small-border);
}

.autocomplete-suggestions::-webkit-scrollbar-track {
    background: transparent;
}

.autocomplete-suggestions::-webkit-scrollbar-thumb {
    background-color: var(--select-border-color);
    border-radius: 3px;
}

.autocomplete-suggestion {
    padding: 8px 16px;

    color: var(--select-item-color, var(--grey-333));
    border-radius: var(--small-border);

    cursor: pointer;
    user-select: none;
}

.autocomplete-suggestion:hover {
    background-color: var(--select-hover-bg, rgba(0, 0, 0, 0.1));

    color: var(--select-hover-color, inherit);
}

input[type="date"]::-webkit-calendar-picker-indicator {
    content: "";
    right: 18px;

    width: 16px;
    height: 16px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23495057' viewBox='0 0 448 512'%3E%3Cpath d='M96 32l0 32L48 64C21.5 64 0 85.5 0 112l0 48 448 0 0-48c0-26.5-21.5-48-48-48l-48 0 0-32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 32L160 64l0-32c0-17.7-14.3-32-32-32S96 14.3 96 32zM448 192L0 192 0 464c0 26.5 21.5 48 48 48l352 0c26.5 0 48-21.5 48-48l0-272z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    cursor: pointer;
}