/**
 * VueSelect - Styly pro Vue select komponentu
 * Styly podle LkSelect
 */

.vue-select {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 64px;
}

.vue-select__control {
    display: flex;
    align-items: center;
    height: 44px;
    padding-left: 12px;
    padding-right: 38px;
    background: var(--color-bg);
    border: 1px solid var(--color-input-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    box-sizing: border-box;
}
.vue-select__control select{
    display: none;
}

/* Input pro vyhledávání */
.vue-select__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 40px 0 12px;
    border: none;
    background: transparent;
    font-size: 16px;
    font-family: inherit;
    font-weight: 400;
    color: var(--color-text);
    outline: none;
    cursor: pointer;
    z-index: 1;
    box-sizing: border-box;
}

.vue-select.is-open .vue-select__input {
    cursor: text;
    background: var(--color-bg, #fff);
}

.vue-select__control::after {
    position: absolute;
    content: "";
    top: 14px;
    right: 14px;
    -webkit-mask-image: url('/assets/icons/sipka.svg'); 
    mask-image: url('/assets/icons/sipka.svg');
    background-size: contain;
    width: 14px;
    background-repeat: no-repeat;
    height: 14px;
    transform: rotate(-90deg);
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--color-form-text);
    transition: transform 0.2s ease;
}

.vue-select.is-open .vue-select__control::after {
    transform: rotate(90deg);
}

.vue-select.is-focused .vue-select__control,
.vue-select.is-open .vue-select__control {
    border-color: var(--color-input-border);
    box-shadow: 0 0 0 2px var(--color-input-focus);
}

.vue-select.is-disabled .vue-select__control {
    background: #FBFBFB;
    color: rgb(150, 150, 150);
    filter: grayscale(1);
    pointer-events: none;
}

/* Placeholder a disabled stavy pro input */
.vue-select__input::placeholder {
    color: var(--color-placeholder);
    font-weight: 400;
}

.vue-select__input:disabled {
    cursor: not-allowed;
}

.vue-select__single-value {
    position: absolute;
    left: 12px;
    right: 38px;
    font-size: 16px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    font-weight: 400;
}

/* Skrýt single-value když je searchable a otevřený */
.vue-select.is-searchable.is-open .vue-select__single-value {
    display: none;
}

.vue-select__placeholder {
    position: absolute;
    left: 12px;
    right: 38px;
    font-size: 16px;
    color: var(--color-placeholder);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    font-weight: 400;
}

.vue-select__indicators {
    display: none;
}

/* Dropdown menu */
.vue-select__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    background: white;
    border-radius: 10px;
    box-shadow: 1px 1px 10px -2px rgba(0,0,0,0.14);
    z-index: 100000;
    width: fit-content;
    /*min-width: 100%;*/
}

/* Teleportovaný dropdown - pozicovaný absolutně v body */
.vue-select__menu--teleported {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    z-index: 999999;
}

.vue-select__options {
    padding: 0;
}

.vue-select__option {
    padding: 4px 24px;
    font-size: 16px;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 52px;
    display: flex;
    align-items: center;
    border-bottom: 1px #EBE6DF solid;
    box-sizing: border-box;
}

.vue-select__option:last-child {
    border-bottom: none;
}

.vue-select__option:hover,
.vue-select__option.is-highlighted {
    background-color: #e5eaec;
}

.vue-select__option.is-selected {
    background-color: #e5eaec;
    font-weight: 500;
}

.vue-select__loading,
.vue-select__no-results {
    padding: 16px 24px;
    font-size: 16px;
    color: var(--color-text-muted);
    text-align: center;
}

/* Malá varianta */
.vue-select--sm .vue-select__control {
    height: 44px;
    padding-left: 8px;
    padding-right: 28px;
}

.vue-select--sm .vue-select__control::after {
    top: 14px;
    right: 14px;
    width: 14px;
    height: 14px;
}

.vue-select--sm .vue-select__input {
    font-size: 16px;
}

.vue-select--sm .vue-select__single-value {
    font-size: 16px;
    right: 28px;
}

.vue-select--sm .vue-select__option {
    padding: 0 12px;
    font-size: 16px;
    min-height: 36px;
}

.vue-select--sm .vue-select__loading,
.vue-select--sm .vue-select__no-results {
    padding: 10px 12px;
    font-size: 16px;
}

/* Scrollbar styling */
.vue-select__menu::-webkit-scrollbar {
    width: 6px;
}

.vue-select__menu::-webkit-scrollbar-track {
    background: var(--color-bg-light);
    border-radius: 3px;
}

.vue-select__menu::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

.vue-select__menu::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}