Live Phone CSS converted to Tailwind

live_phone.css

/**
Include this file instead of importing the CSS file from deps/
*/

/* Top level container for live phone components. */
.live_phone {
    @apply relative flex rounded-[5px] border-[1px] border-solid border-[#ddd] bg-white;
    @apply focus-within:shadow-[0_0_5px_blue];
}

/* Additional class for the top level container, if the input is valid. */
.live_phone-valid {
    @apply bg-[#ECFFE8];
}

input.live_phone-input,
.live_phone-country {
    @apply antialiased text-[0.875em] font-normal font-sans;
}

/* The country calling code selector container. */
.live_phone-country {
    @apply flex items-center justify-center rounded-tl-[5px] rounded-bl-[5px] cursor-pointer pl-[10px];
    @apply after:whitespace-pre after:content-['_'];
    @apply focus:bg-[#F2F2F2] focus:shadow-[0_0_5px_blue] focus:outline-0 z-[3] focus:relative;
    @apply active:pt-[2px] active:bg-[#E0E0E0];
}

/* The country flag emoji shown next to the country calling code of the selected country. */
.live_phone-country-flag {
    @apply inline-block mr-[5px];
}

/* The text field for the phone number (without country calling code). */
input.live_phone-input {
    @apply flex-1 m-0 border-0 p-0 z-[2] bg-none rounded-none rounded-tr-[5px] rounded-br-[5px];
}

/* The list of countries popup. */
.live_phone-country-list {
    @apply absolute text-left list-none top-full max-w-[300px] max-h-[300px] bg-[#fff] rounded-[3px] p-0 m-0 overflow-auto z-[5] shadow-[0_0_5px_rgba(0,0,0,.4)];
}

/* The container of the country option shown in the popup list of countries. */
.live_phone-country-item {
    @apply flex text-[16px] cursor-pointer m-0 py-[5px] px-[10px];
}

.live_phone-country-item:hover,
.live_phone-country-item.selected {
    @apply bg-[#EEEEEE];
}

/* The separator between preferred and other countries shown in the popup list of countries. */
.live_phone-country-separator {
    @apply m-0 h-0 p-0 overflow-hidden border-b-[1px] border-solid border-b-[#ddd];
}

/* The human-readable name of the country shown in the popup list of countries. */
.live_phone-country-item-name {
    @apply inline-block py-0 px-[0.5em] max-w-[80%] whitespace-nowrap overflow-ellipsis overflow-hidden;
}

/* The country calling code shown in the popup list of countries. */
.live_phone-country-item-code {
    @apply text-[#C8C8C8]
}