@keyframes animateRegionSelect {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.FormElementPhoneFancy {
    display: flex;
    position: relative;
    align-items: stretch;

    button {
        display: inherit;
        padding-inline: 0;
    }

    select,
    ::picker(select) {
        appearance: base-select;
    }

    select {
        margin-right: 0;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }

    select:has(selectedcontent) {
        padding-inline: .5em 2em;
        background-image: url(/ui/uibase/icons/svg/chevron-down.svg);
        background-position: calc(100% - .5em) 50%;
        background-size: 1em;
        background-repeat: no-repeat;
    }

    option::checkmark,
    select::picker-icon {
        display: none;
    }

    ::picker(select) {
        padding: 0;
        border-radius: 4px;
        border: 0;
        box-shadow: var(--mi-shdw-4, 0 6px 11px -3px #00000040);
    }

    option {
        grid-template-columns: min-content min-content;
        place-items: start;
        gap: .5em;
        &:hover {
            background: #eee;
        }
    }

    option::before {
        content: attr(data-value);
    }

    option .FormElementPhoneFancy__regionShort {
        display: none;
    }

    option,
    selectedcontent {
        display: flex;
        align-items: center;
        gap: .5em;
    }

    .FormElementPhoneFancy__regioncode {
        justify-self: end;
        opacity: .5;
    }

    selectedcontent .FormElementPhoneFancy__regioncode {
        opacity: 1;
    }

    .animateRegionSelect selectedcontent span {
        animation: animateRegionSelect .2s;
    }
}

/**
 * Phone number input
 */

.FormElementPhoneFancy__select ~ .FormElementPhoneFancy__input[type='tel'] {
    margin-left: -1px;
    padding-left: 1em;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}