.PhoneInput {
    &-CountrySelect {
        align-self: stretch;
        display: flex;

        // Bootstrap's .dropdown / .dropdown-toggle wrappers are block by default,
        // which breaks the flex stretch chain from SegmentedInput down to the trigger.
        .dropdown,
        .dropdown-toggle {
            display: flex;
            align-items: stretch;
        }

        // Compact the default SuiteSelectInput trigger down to flag + chevron only.
        .SuiteSelect-input {
            border: 0;
            background: transparent;
            padding: 0 var(--padding-medium-large);
            min-height: 0;
            min-width: 0;
            width: auto;
            display: inline-flex;
            align-items: center;
            gap: var(--padding-small);
            color: var(--text-primary);
            font-size: 14px;

            // Default SelectInput renders a placeholder div when value is empty —
            // we always seed a country, but hide it just in case.
            .SuiteSelect-input-placeholder {
                display: none;
            }

            .SuiteSelect-input-actions {
                display: inline-flex;
                align-items: center;
            }

            .CountryFlag {
                display: block;
            }
        }
    }

    &-CountryTrigger-content {
        display: inline-flex;
        align-items: center;
        gap: var(--padding-small);
    }

    &-CountryTrigger-code {
        color: var(--text-primary);
        white-space: nowrap;
    }

    &-number.form-control {
        border: 0;
        box-shadow: none;
        background-color: transparent;
        padding: var(--padding-medium-small) var(--padding-medium-large);

        &:focus {
            box-shadow: none;
        }

        &.disabled,
        &:disabled {
            background-color: transparent;
            color: var(--text-primary-disabled);
        }

        // Chrome paints `:-webkit-autofill` with a blue background-color that
        // can't be overridden, only masked. Use an inset shadow + explicit
        // text fill so the input keeps the Suite styling and the parent
        // SegmentedInput outline stays visible after a browser autofill.
        &:-webkit-autofill,
        &:-webkit-autofill:hover,
        &:-webkit-autofill:focus,
        &:-webkit-autofill:active {
            box-shadow: 0 0 0 1000px var(--fields-fill-default, #fff) inset;
            -webkit-text-fill-color: var(--text-primary);
            transition: background-color 9999s ease-in-out 0s;
        }
    }

    &.with-error .SegmentedInput {
        outline-color: var(--fields-stroke-error, var(--red-500));
    }
}