.phone-number {
    .phone-number-control {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        background-color: var(--white);
        border: 1px solid var(--border-200);
        .border-radius(@form-border-radius);
        transition:
            border-color 150ms ease,
            box-shadow 150ms ease;

        &:hover:not(.disabled) {
            border-color: var(--border-300, var(--border-200));
        }

        &:focus-within:not(.disabled) {
            border-color: var(--primary-main, #2970ff);
        }

        &.disabled {
            pointer-events: none;
            background-color: var(--bg-50);

            .phone-number-dial-code,
            .phone-number-field,
            .phone-number-select-value {
                color: var(--text-300);
            }
        }

        &.field-invalid {
            border-color: var(--error-main) !important;

            &:focus-within {
                box-shadow: @form-focus-error-box-shadow;
            }
        }
    }

    .phone-number-select {
        position: relative;
        flex-shrink: 0;
        height: 100%;
        display: flex;
        align-items: stretch;
    }

    .phone-number-select-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        height: 100%;
        padding: 0 0 0 0.75rem;
        border: none;
        background: transparent;
        cursor: pointer;
        font-family: @form-font-family;
        font-size: @form-font-size;
        font-weight: @font-weight-medium;
        color: inherit;

        &:disabled {
            cursor: default;
        }
    }

    .phone-number-menu {
        position: absolute;
        top: ~'calc(100% + 6px)';
        left: 0;
        min-width: 220px;
        margin: 0;
        padding: 0.25rem 0;
        list-style: none;
        z-index: @zindex-dropdown;
        background: var(--white);
        border: 1px solid var(--border-200);
        .border-radius(@form-border-radius);
        .box-shadow(0 4px 12px 0 rgba(16, 24, 40, 0.12));
        max-height: 240px;
        overflow-y: auto;
    }

    .phone-number-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.5rem 0.75rem;
        font-size: @font-size-sm;
        cursor: pointer;
        white-space: nowrap;

        &:hover {
            background: var(--bg-50);
        }

        &.selected {
            font-weight: @font-weight-semibold;
            background: var(--bg-50);
        }

        .phone-number-option-dial {
            color: var(--text-300);
        }
    }

    .phone-number-dial-code {
        flex-shrink: 0;
        padding-left: 0.75rem;
        font-size: @form-font-size;
        color: inherit;
        pointer-events: none;
    }

    .phone-number-field {
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        padding: 0 0.5rem;
        border: none;
        outline: none;
        background: transparent;
        color: inherit;
        font-family: @form-font-family;
        font-size: @form-font-size;
        font-weight: @form-font-weight;
        box-shadow: none;

        &:focus,
        &:focus-visible {
            outline: none;
            box-shadow: none;
        }

        &::placeholder {
            color: var(--text-300);
        }
    }

    .phone-number-status-icon {
        flex-shrink: 0;
        margin-right: 12px;
        display: inline-flex;
        align-items: center;
        font-size: 14px;
        line-height: 1;

        &.error:before {
            color: var(--error-main);
        }
    }

    .field-tooltip-icon {
        margin-right: 0.5rem;
    }

    .phone-number-hint {
        display: block;
        margin-top: 0.25rem;
        font-size: @font-size-xs;
        line-height: 1.4;
        color: var(--text-300);
    }
}

.phone-number-menu--portal {
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--border-200);
    box-shadow: 0 4px 12px 0 rgba(16, 24, 40, 0.12);
    max-height: 240px;
    overflow-y: auto;
    z-index: 9999;

    .phone-number-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.5rem 0.75rem;
        cursor: pointer;
        white-space: nowrap;

        &:hover {
            background: var(--bg-50);
        }

        &.selected {
            background: var(--bg-50);
        }
        &--empty {
            cursor: default;
            color: var(--text-300);

            &:hover {
                background: transparent;
            }
        }

        .phone-number-option-dial {
            color: var(--text-300);
        }
    }
}