.phone-input,
.phone-input .listbox-button {
    display: inline-flex;
}
.phone-input button.btn {
    border-radius: 8px 0 0 8px;
    border-right-style: none;
    min-width: 64px;
    padding-inline: var(--spacing-200) var(--spacing-100);
}
.phone-input button.btn:focus-visible {
    border-right-style: solid;
    box-shadow: 0 0 0 1px var(--color-border-strong);
    outline: none;
    z-index: 1;
}
.phone-input button.btn svg.icon:last-child {
    margin-inline-start: var(--spacing-50);
}
.phone-input .listbox-button span.fflag,
.phone-input .listbox-button svg.flag {
    height: 18px;
    width: 24px;
}
.phone-input .listbox-button__value,
.phone-input .listbox__value {
    display: inline-flex;
}
.phone-input .listbox-button__value svg,
.phone-input .listbox__value svg {
    margin-inline-end: var(--spacing-200);
}
.phone-input .listbox-button__value span,
.phone-input .listbox__value span {
    margin-inline-end: var(--spacing-100);
}
.phone-input .listbox-button__value span:last-child,
.phone-input .listbox__value span:last-child {
    color: var(--color-foreground-secondary);
}
.phone-input .listbox-button__value span:first-of-type,
.phone-input .listbox__value span:first-of-type {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.phone-input .textbox {
    border-radius: 0 var(--border-radius-50) var(--border-radius-50) 0;
}
.phone-input--large {
    height: 48px;
}
.phone-input--fluid,
.phone-input--fluid .textbox {
    width: 100%;
}
.phone-input--readonly .listbox-button button[aria-disabled="true"],
.phone-input--readonly .listbox-button button[disabled] {
    border-color: var(--textbox-border-color, var(--color-border-medium));
}
.phone-input--readonly .textbox span:first-child {
    color: var(
        --textbox-disabled-foreground-color,
        var(--color-foreground-secondary)
    );
}
.phone-input.phone-input--readonly .textbox.textbox {
    background-color: var(
        --textbox-background-color,
        var(--color-background-secondary)
    );
    border-color: var(--textbox-border-color, var(--color-border-medium));
    border-style: solid;
    border-width: 1px;
}
.phone-input--readonly input.textbox__control[readonly] {
    color: var(--textbox-foreground-color, var(--color-foreground-secondary));
}
.phone-input--disabled span.fflag,
.phone-input--disabled svg.flag {
    filter: var(--color-media-disabled-filter);
}
.phone-input--disabled .textbox {
    border-color: var(
        --textbox-disabled-border-color,
        var(--color-background-disabled)
    );
}
.phone-input--disabled .textbox span:first-child {
    color: var(
        --textbox-disabled-foreground-color,
        var(--color-foreground-disabled)
    );
}
.phone-input.phone-input--error .textbox.textbox {
    border-color: var(
        --textbox-invalid-foreground-color,
        var(--color-border-attention)
    );
    border-left-color: var(--textbox-border-color, var(--color-border-medium));
}
.phone-input .floating-label .floating-label__label {
    z-index: 2;
}
.phone-input .floating-label .textbox > span:first-child {
    padding-bottom: 2px;
    padding-top: 18px;
}
.phone-input .floating-label--large .textbox > span:first-child {
    padding-bottom: 5px;
    padding-top: 23px;
}
@media screen and (min-width: 320px) {
    .phone-input .listbox-button__value span:first-of-type,
    .phone-input .listbox__value span:first-of-type {
        max-width: 50vw;
    }
}
[dir="rtl"] .phone-input button.btn {
    border-radius: 0 8px 8px 0;
}
[dir="rtl"] .phone-input .textbox {
    border-radius: var(--border-radius-50) 0 0 var(--border-radius-50);
    direction: ltr;
    margin-left: 0;
    margin-right: -1px;
}
[dir="rtl"] .phone-input .listbox-button__value span:last-child,
[dir="rtl"] .phone-input .listbox__value span:last-child {
    direction: ltr;
}