@import "tailwindcss";

:root {
    --iti-border-width: 1px;
    --iti-hover-color: none;
}

.iti {
    display: block;
}

.iti__arrow {
    border: none;
    position: relative;
    top: 1px;
    height: 24px;
    width: 24px;
}

.iti__arrow:after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m8 10 4 4 4-4'/></svg>");
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
}

.iti__arrow.iti__arrow--up:after {
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>\<path stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m16 14-4-4-4 4'/>\</svg>");
}

.iti__country {
    padding: .5rem 1rem;
    /*border-radius: .75rem;*/
}

.iti__country.iti__highlight {
    background: var(--color-zinc-100);
}

.iti__country-container {
    padding: 0;
}

.iti__dial-code {
    color: var(--color-black);
}

.iti--inline-dropdown .iti__dropdown-content {
    background:var(--color-white);
    border: 1px solid #8b8b92;
    border-radius: .75rem;
    box-shadow: none;
    margin-top: .5rem;
    overflow: hidden;
}

.iti__no-results {
    padding: 1rem 0;
}

.iti__search-clear,
.iti__search-icon {
    display: none;
}

.iti__search-input {
    background: var(--color-zinc-50);
    border: 1px solid #8b8b92;
    border-radius: .75rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.iti__search-input-wrapper {
    margin: .5rem;
}

.iti__selected-country {
    border-radius: .75rem;
    border: 1px solid transparent;
    padding: 0 1rem;
}

.iti__selected-country-primary {
    border-radius: .75rem;
    padding: 0;
}

.iti__selected-country[aria-expanded=true] {
    background: transparent;
    border-radius: .75rem;
    border: 1px solid var(--color-blue-600);
    box-shadow: 0 0 0 1px var(--color-blue-600);
    outline: none;
}

/* BASE */
.iti__selected-country,
.iti__search-input {
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.625rem;
    outline: none;
    box-shadow: none;
}

.iti__search-input {
    border-color: #8b8b92;
}

/* FOCUS (focus-visible) */
.iti__selected-country:focus-visible,
.iti__search-input:focus-visible {
    border: 1px solid var(--color-blue-600);
    box-shadow: 0 0 0 1px var(--color-blue-600);
    outline: none;
}

/* FALLBACK dla intl-tel-input (bo focus często idzie do środka) */
.iti__selected-country:focus-within {
    border: 1px solid var(--color-blue-600);
    box-shadow: 0 0 0 1px var(--color-blue-600);
}



.dark {
    .iti__arrow:after {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m8 10 4 4 4-4'/></svg>");
    }

    .iti__arrow.iti__arrow--up:after {
        background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>\<path stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m16 14-4-4-4 4'/>\</svg>");
    }

    .iti__country.iti__highlight {
        background: var(--color-zinc-700);
    }

    .iti__dial-code {
        color: var(--color-white);
    }

    .iti--inline-dropdown .iti__dropdown-content {
        background: var(--color-zinc-800);
        border: 1px solid var(--color-zinc-500);
    }

    .iti__search-input {
        background: var(--color-zinc-800);
        border: 1px solid var(--color-zinc-500);
    }

    .iti__search-input:focus,
    .iti__search-input:focus-visible {
        background: var(--color-zinc-800);
        border-color: var(--color-zinc-800);
        box-shadow: 0 0 0 3px var(--color-yellow-400);
    }

    .iti__selected-country:focus,
    .iti__selected-country:focus-visible {
        /*background: var(--color-zinc-800);*/
        /*box-shadow: 0 0 0 3px var(--color-yellow-400);*/
    }

    .iti__selected-country[aria-expanded=true] {
        background: var(--color-zinc-500);
    }

    .iti__selected-country[aria-expanded=true] {
        background: var(--color-zinc-700);
    }

    .iti__selected-country[aria-expanded=true] {
        background: transparent;
        border-radius: .75rem;
        border: 1px solid var(--color-yellow-400);
        box-shadow: 0 0 0 1px var(--color-yellow-400);
        outline: none;
    }
    .iti__selected-country:focus-visible,
    .iti__search-input:focus-visible {
        border: 1px solid var(--color-yellow-400);
        box-shadow: 0 0 0 1px var(--color-yellow-400);
        outline: none;
    }

    /* FALLBACK dla intl-tel-input (bo focus często idzie do środka) */
    .iti__selected-country:focus-within {
        border: 1px solid var(--color-yellow-400);
        box-shadow: 0 0 0 1px var(--color-yellow-400);
    }
}