.select-box {
    position: relative;


    .selected {
        --_input-padding-left: 100px;
        display: flex;
        align-items: center;
        border-radius: 0.5rem;

        input[type="tel"] {
            padding-left: var(--_input-padding-left);
            text-indent: 0.75rem;
        }
    }

    .country-flag {
        object-fit: contain;

        width: 30px;
        height: 22px;
    }

    .selected-country-option,
    .selected-option {
        min-width: var(--_input-padding-left);
        cursor: pointer;
        position: absolute;
        padding: 0.5rem;
        display: grid;
        grid-template-columns: 30px auto;
        justify-content: start;
        gap: 0.5rem;
        border: none;
        background-color: transparent;

        &::after {
            content: "";
            inset-block: 0;
            margin-block: 0.5rem;
            width: 2px;
            right: 0;
            position: absolute;
            background-color: #d5d5d5;
        }
    }

    .country-code {
        cursor: pointer;
        all: initial;
        font: inherit;
        line-height: 22px;
        letter-spacing: -2%;
        border: none;
        min-width: auto;
        width: 5ch;

        &:focus-visible {
            outline: 0;
        }
    }

    .country-lists-dialog {
        position: absolute;
        top: 4rem;
        z-index: 100;
        width: 100%;
        border: none;
        border-radius: 0.5rem;
        background-color: var(--white-clr);
        box-shadow: 0 4px 10px var(--secondary-clr-15);

        &::before {
            content: "";
            position: absolute;
            left: 1rem;
            top: -1.125rem;
            border: 0.6rem solid transparent;
            border-bottom-color: var(--secondary-clr);
        }
    }

    .country-search {
        background-color: var(--secondary-clr-15);
        border: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: 1px solid #d5d5d5;
        font-size: var(--fs-300);
        padding: 0.5rem;
    }

    ol {
        max-height: 23rem;
        overflow: overlay;
        overscroll-behavior: contain;
    }

    ol::-webkit-scrollbar {
        width: 0.6rem;
    }

    ol::-webkit-scrollbar-thumb {
        width: 0.4rem;
        height: 3rem;
        background-color: #ccc;
        border-radius: 0.4rem;
    }

    .country-code {
        caret-color: transparent;
        user-select: none;
        flex-shrink: 0;
        margin-left: auto;
    }

    .country-item {
        cursor: pointer;
        padding: 0.5rem;
        display: flex;
        gap: 0.5rem;
        align-items: center;
        font-size: var(--fs-300);

        &.hide {
            display: none;
        }

        &:hover {
            background-color: var(--secondary-clr-15);
        }
    }

}