/* docara-shell-source: runtime/component/country-code/css/country-code.css */
@charset "UTF-8";
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-space-1\/4) justify-content/flex-start (.justify-start) */
  .sf-country-code {
    background-color: transparent;
    background-color: var(--sf-country-code--background-color, transparent);
    gap: var(--sf-space-1\/4);
    gap: var(--sf-country-code--gap, var(--sf-space-1\/4));
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-country-code-label--gap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-country-code .sf-country-code-label {
    --sf-country-code-label--background-color: transparent;
    --sf-country-code-label--gap: var(--sf-space-1\/4);
    background-color: var(--sf-country-code-label--background-color);
    gap: var(--sf-country-code-label--gap);
  }
  .sf-country-code .sf-country-code-text {
    --sf-country-code-text--color: var(--sf-on-surface-variant);
    --sf-country-code-text--font-family: var(--sf-text--family);
    --sf-country-code-text--font-weight: var(--sf-font-weight-regular);
    color: var(--sf-country-code-text--color);
    font-family: var(--sf-country-code-text--font-family);
    font-size: var(--sf-country-code-text--font-size);
    font-weight: var(--sf-country-code-text--font-weight);
    line-height: var(--sf-country-code-text--line-height);
  }
  .sf-country-code .sf-country-code-required {
    --sf-country-code-required--color: var(--sf-error);
    --sf-country-code-required--font-family: var(--sf-text--family);
    --sf-country-code-required--font-weight: var(--sf-font-weight-regular);
    color: var(--sf-country-code-required--color);
    font-family: var(--sf-country-code-required--font-family);
    font-size: var(--sf-country-code-required--font-size);
    font-weight: var(--sf-country-code-required--font-weight);
    line-height: var(--sf-country-code-required--line-height);
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-country-code .sf-country-code-field{
    border-bottom-right-radius: var(--sf-country-code-field--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial){
  html:not([dir="rtl"]) .sf-country-code .sf-country-code-field{
    border-bottom-right-radius: var(--sf-country-code-field--border-end-end-radius);
    }
  }
  .sf-country-code .sf-country-code-field:where(:dir(ltr)){
    border-bottom-right-radius: var(--sf-country-code-field--border-end-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-country-code .sf-country-code-field{
    border-bottom-left-radius: var(--sf-country-code-field--border-end-end-radius);
  }
  @supports not (border-end-end-radius: initial){
  [dir="rtl"] .sf-country-code .sf-country-code-field{
    border-bottom-left-radius: var(--sf-country-code-field--border-end-end-radius);
    }
  }
  .sf-country-code .sf-country-code-field:where(:dir(rtl)){
    border-bottom-left-radius: var(--sf-country-code-field--border-end-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-country-code .sf-country-code-field{
    border-bottom-left-radius: var(--sf-country-code-field--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial){
  html:not([dir="rtl"]) .sf-country-code .sf-country-code-field{
    border-bottom-left-radius: var(--sf-country-code-field--border-end-start-radius);
    }
  }
  .sf-country-code .sf-country-code-field:where(:dir(ltr)){
    border-bottom-left-radius: var(--sf-country-code-field--border-end-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-country-code .sf-country-code-field{
    border-bottom-right-radius: var(--sf-country-code-field--border-end-start-radius);
  }
  @supports not (border-end-start-radius: initial){
  [dir="rtl"] .sf-country-code .sf-country-code-field{
    border-bottom-right-radius: var(--sf-country-code-field--border-end-start-radius);
    }
  }
  .sf-country-code .sf-country-code-field:where(:dir(rtl)){
    border-bottom-right-radius: var(--sf-country-code-field--border-end-start-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-country-code .sf-country-code-field{
    border-top-right-radius: var(--sf-country-code-field--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial){
  html:not([dir="rtl"]) .sf-country-code .sf-country-code-field{
    border-top-right-radius: var(--sf-country-code-field--border-start-end-radius);
    }
  }
  .sf-country-code .sf-country-code-field:where(:dir(ltr)){
    border-top-right-radius: var(--sf-country-code-field--border-start-end-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-country-code .sf-country-code-field{
    border-top-left-radius: var(--sf-country-code-field--border-start-end-radius);
  }
  @supports not (border-start-end-radius: initial){
  [dir="rtl"] .sf-country-code .sf-country-code-field{
    border-top-left-radius: var(--sf-country-code-field--border-start-end-radius);
    }
  }
  .sf-country-code .sf-country-code-field:where(:dir(rtl)){
    border-top-left-radius: var(--sf-country-code-field--border-start-end-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-country-code .sf-country-code-field{
    border-top-left-radius: var(--sf-country-code-field--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial){
  html:not([dir="rtl"]) .sf-country-code .sf-country-code-field{
    border-top-left-radius: var(--sf-country-code-field--border-start-start-radius);
    }
  }
  .sf-country-code .sf-country-code-field:where(:dir(ltr)){
    border-top-left-radius: var(--sf-country-code-field--border-start-start-radius);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-country-code .sf-country-code-field{
    border-top-right-radius: var(--sf-country-code-field--border-start-start-radius);
  }
  @supports not (border-start-start-radius: initial){
  [dir="rtl"] .sf-country-code .sf-country-code-field{
    border-top-right-radius: var(--sf-country-code-field--border-start-start-radius);
    }
  }
  .sf-country-code .sf-country-code-field:where(:dir(rtl)){
    border-top-right-radius: var(--sf-country-code-field--border-start-start-radius);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-country-code .sf-country-code-field{
    padding-right: var(--sf-country-code-field--padding-inline-end);
  }
  @supports not (padding-inline-end: initial){
  html:not([dir="rtl"]) .sf-country-code .sf-country-code-field{
    padding-right: var(--sf-country-code-field--padding-inline-end);
    }
  }
  .sf-country-code .sf-country-code-field:where(:dir(ltr)){
    padding-right: var(--sf-country-code-field--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-country-code .sf-country-code-field{
    padding-left: var(--sf-country-code-field--padding-inline-end);
  }
  @supports not (padding-inline-end: initial){
  [dir="rtl"] .sf-country-code .sf-country-code-field{
    padding-left: var(--sf-country-code-field--padding-inline-end);
    }
  }
  .sf-country-code .sf-country-code-field:where(:dir(rtl)){
    padding-left: var(--sf-country-code-field--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-country-code .sf-country-code-field{
    padding-left: var(--sf-country-code-field--padding-inline-start);
  }
  @supports not (padding-inline-start: initial){
  html:not([dir="rtl"]) .sf-country-code .sf-country-code-field{
    padding-left: var(--sf-country-code-field--padding-inline-start);
    }
  }
  .sf-country-code .sf-country-code-field:where(:dir(ltr)){
    padding-left: var(--sf-country-code-field--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-country-code .sf-country-code-field{
    padding-right: var(--sf-country-code-field--padding-inline-start);
  }
  @supports not (padding-inline-start: initial){
  [dir="rtl"] .sf-country-code .sf-country-code-field{
    padding-right: var(--sf-country-code-field--padding-inline-start);
    }
  }
  .sf-country-code .sf-country-code-field:where(:dir(rtl)){
    padding-right: var(--sf-country-code-field--padding-inline-start);
  }
  .sf-country-code .sf-country-code-field {
    --sf-country-code-field--background-color: var(--sf-surface-0);
    --sf-country-code-field--border: var(--sf-px) solid;
    --sf-country-code-field--border-color: var(--sf-outline);
    --sf-country-code-field--border-end-end-radius: var(--sf-ui-radius-default);
    --sf-country-code-field--border-end-start-radius: var(--sf-ui-radius-default);
    --sf-country-code-field--border-start-end-radius: var(--sf-ui-radius-default);
    --sf-country-code-field--border-start-start-radius: var(--sf-ui-radius-default);
    background-color: var(--sf-country-code-field--background-color);
    border: var(--sf-country-code-field--border);
    border-color: transparent;
    border-color: var(--sf-country-code-field--border-color, transparent);
    border-end-end-radius: var(--sf-country-code-field--border-end-end-radius);
    border-end-start-radius: var(--sf-country-code-field--border-end-start-radius);
    border-start-end-radius: var(--sf-country-code-field--border-start-end-radius);
    border-start-start-radius: var(--sf-country-code-field--border-start-start-radius);
    box-shadow: var(--sf-country-code-field--box-shadow);
    padding-bottom: var(--sf-country-code-field--padding-bottom);
    -webkit-padding-end: var(--sf-country-code-field--padding-inline-end);
            padding-inline-end: var(--sf-country-code-field--padding-inline-end);
    -webkit-padding-start: var(--sf-country-code-field--padding-inline-start);
            padding-inline-start: var(--sf-country-code-field--padding-inline-start);
    padding-top: var(--sf-country-code-field--padding-top);
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  .sf-country-code .sf-country-code-left {
    --sf-country-code-left--background-color: transparent;
    background-color: var(--sf-country-code-left--background-color);
  }
  /* The slot holds a picture, and the picture fills it in the shape the rest of
     the set gives a flag: the rectangle a dropdown flag takes (three quarters of
     the line high, 1.4 times as wide), the radius role and the hairline that
     keeps a white flag off a white field. */
  .sf-country-code .sf-country-code-flag-icon img,
  .sf-country-code .sf-country-code-flag img {
    display: block;
    height: 100%;
    block-size: 100%;
    width: 100%;
    inline-size: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: var(--sf-radius--ui);
    outline: var(--sf-px) solid var(--sf-outline-variant);
    outline-offset: calc(var(--sf-px) * -1);
  }
  .sf-country-code .sf-country-code-flag-icon {
    --sf-country-code-flag-icon--background-color: transparent;
    background-color: var(--sf-country-code-flag-icon--background-color);
    font-size: var(--sf-country-code-flag-icon--font-size);
    height: var(--sf-country-code-flag-icon--height);
    opacity: var(--sf-country-code-flag-icon--opacity);
    width: var(--sf-country-code-flag-icon--width);
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-country-code .sf-country-code-field input{
    padding-right: var(--sf-country-code-input--padding-inline-end);
  }
  @supports not (padding-inline-end: initial){
  html:not([dir="rtl"]) .sf-country-code .sf-country-code-field input{
    padding-right: var(--sf-country-code-input--padding-inline-end);
    }
  }
  .sf-country-code .sf-country-code-field input:where(:dir(ltr)){
    padding-right: var(--sf-country-code-input--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-country-code .sf-country-code-field input{
    padding-left: var(--sf-country-code-input--padding-inline-end);
  }
  @supports not (padding-inline-end: initial){
  [dir="rtl"] .sf-country-code .sf-country-code-field input{
    padding-left: var(--sf-country-code-input--padding-inline-end);
    }
  }
  .sf-country-code .sf-country-code-field input:where(:dir(rtl)){
    padding-left: var(--sf-country-code-input--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-country-code .sf-country-code-field input{
    padding-left: var(--sf-country-code-input--padding-inline-start);
  }
  @supports not (padding-inline-start: initial){
  html:not([dir="rtl"]) .sf-country-code .sf-country-code-field input{
    padding-left: var(--sf-country-code-input--padding-inline-start);
    }
  }
  .sf-country-code .sf-country-code-field input:where(:dir(ltr)){
    padding-left: var(--sf-country-code-input--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-country-code .sf-country-code-field input{
    padding-right: var(--sf-country-code-input--padding-inline-start);
  }
  @supports not (padding-inline-start: initial){
  [dir="rtl"] .sf-country-code .sf-country-code-field input{
    padding-right: var(--sf-country-code-input--padding-inline-start);
    }
  }
  .sf-country-code .sf-country-code-field input:where(:dir(rtl)){
    padding-right: var(--sf-country-code-input--padding-inline-start);
  }
  .sf-country-code .sf-country-code-field input {
    --sf-country-code-input--background-color: transparent;
    background-color: var(--sf-country-code-input--background-color);
    color: var(--sf-country-code-input--color);
    font-family: var(--sf-country-code-input--font-family);
    font-size: var(--sf-country-code-input--font-size);
    font-weight: var(--sf-country-code-input--font-weight);
    line-height: var(--sf-country-code-input--line-height);
    -webkit-padding-end: var(--sf-country-code-input--padding-inline-end);
            padding-inline-end: var(--sf-country-code-input--padding-inline-end);
    -webkit-padding-start: var(--sf-country-code-input--padding-inline-start);
            padding-inline-start: var(--sf-country-code-input--padding-inline-start);
  }
  .sf-country-code .sf-country-code-field input::-webkit-input-placeholder {
    --sf-country-code-placeholder--color: var(--sf-on-surface-variant);
    --sf-country-code-placeholder--font-family: var(--sf-text--family);
    color: var(--sf-country-code-placeholder--color);
    font-family: var(--sf-country-code-placeholder--font-family);
    font-size: var(--sf-country-code-placeholder--font-size);
    line-height: var(--sf-country-code-placeholder--line-height);
    opacity: 1;
  }
  .sf-country-code .sf-country-code-field input::-moz-placeholder {
    --sf-country-code-placeholder--color: var(--sf-on-surface-variant);
    --sf-country-code-placeholder--font-family: var(--sf-text--family);
    color: var(--sf-country-code-placeholder--color);
    font-family: var(--sf-country-code-placeholder--font-family);
    font-size: var(--sf-country-code-placeholder--font-size);
    line-height: var(--sf-country-code-placeholder--line-height);
    opacity: 1;
  }
  .sf-country-code .sf-country-code-field input:-ms-input-placeholder {
    --sf-country-code-placeholder--color: var(--sf-on-surface-variant);
    --sf-country-code-placeholder--font-family: var(--sf-text--family);
    color: var(--sf-country-code-placeholder--color);
    font-family: var(--sf-country-code-placeholder--font-family);
    font-size: var(--sf-country-code-placeholder--font-size);
    line-height: var(--sf-country-code-placeholder--line-height);
    opacity: 1;
  }
  .sf-country-code .sf-country-code-field input::-ms-input-placeholder {
    --sf-country-code-placeholder--color: var(--sf-on-surface-variant);
    --sf-country-code-placeholder--font-family: var(--sf-text--family);
    color: var(--sf-country-code-placeholder--color);
    font-family: var(--sf-country-code-placeholder--font-family);
    font-size: var(--sf-country-code-placeholder--font-size);
    line-height: var(--sf-country-code-placeholder--line-height);
    opacity: 1;
  }
  .sf-country-code .sf-country-code-field input::placeholder {
    --sf-country-code-placeholder--color: var(--sf-on-surface-variant);
    --sf-country-code-placeholder--font-family: var(--sf-text--family);
    color: var(--sf-country-code-placeholder--color);
    font-family: var(--sf-country-code-placeholder--font-family);
    font-size: var(--sf-country-code-placeholder--font-size);
    line-height: var(--sf-country-code-placeholder--line-height);
    opacity: 1;
  }
  .sf-country-code .sf-country-code-hint {
    --sf-country-code-hint--color: var(--sf-on-surface-variant);
    --sf-country-code-hint--font-family: var(--sf-text--family);
    --sf-country-code-hint--font-weight: var(--sf-font-weight-regular);
    color: var(--sf-country-code-hint--color);
    font-family: var(--sf-country-code-hint--font-family);
    font-size: var(--sf-country-code-hint--font-size);
    font-weight: var(--sf-country-code-hint--font-weight);
    line-height: var(--sf-country-code-hint--line-height);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-country-code .sf-country-code-list{
    padding-right: var(--sf-country-code-list--padding-inline-end);
  }
  @supports not (padding-inline-end: initial){
  html:not([dir="rtl"]) .sf-country-code .sf-country-code-list{
    padding-right: var(--sf-country-code-list--padding-inline-end);
    }
  }
  .sf-country-code .sf-country-code-list:where(:dir(ltr)){
    padding-right: var(--sf-country-code-list--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-country-code .sf-country-code-list{
    padding-left: var(--sf-country-code-list--padding-inline-end);
  }
  @supports not (padding-inline-end: initial){
  [dir="rtl"] .sf-country-code .sf-country-code-list{
    padding-left: var(--sf-country-code-list--padding-inline-end);
    }
  }
  .sf-country-code .sf-country-code-list:where(:dir(rtl)){
    padding-left: var(--sf-country-code-list--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-country-code .sf-country-code-list{
    padding-left: var(--sf-country-code-list--padding-inline-start);
  }
  @supports not (padding-inline-start: initial){
  html:not([dir="rtl"]) .sf-country-code .sf-country-code-list{
    padding-left: var(--sf-country-code-list--padding-inline-start);
    }
  }
  .sf-country-code .sf-country-code-list:where(:dir(ltr)){
    padding-left: var(--sf-country-code-list--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-country-code .sf-country-code-list{
    padding-right: var(--sf-country-code-list--padding-inline-start);
  }
  @supports not (padding-inline-start: initial){
  [dir="rtl"] .sf-country-code .sf-country-code-list{
    padding-right: var(--sf-country-code-list--padding-inline-start);
    }
  }
  .sf-country-code .sf-country-code-list:where(:dir(rtl)){
    padding-right: var(--sf-country-code-list--padding-inline-start);
  }
  .sf-country-code .sf-country-code-list {
    background-color: var(--sf-country-code-list--background-color);
    box-shadow: var(--sf-country-code-list--box-shadow);
    padding-bottom: var(--sf-country-code-list--padding-bottom);
    -webkit-padding-end: var(--sf-country-code-list--padding-inline-end);
            padding-inline-end: var(--sf-country-code-list--padding-inline-end);
    -webkit-padding-start: var(--sf-country-code-list--padding-inline-start);
            padding-inline-start: var(--sf-country-code-list--padding-inline-start);
    padding-top: var(--sf-country-code-list--padding-top);
  }
  .sf-country-code .sf-country-code-items {
    background-color: var(--sf-country-code-items--background-color);
  }
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-country-code-item--gap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-country-code .sf-country-code-item{
    padding-right: var(--sf-country-code-item--padding-inline-end);
  }
  @supports not (padding-inline-end: initial){
  html:not([dir="rtl"]) .sf-country-code .sf-country-code-item{
    padding-right: var(--sf-country-code-item--padding-inline-end);
    }
  }
  .sf-country-code .sf-country-code-item:where(:dir(ltr)){
    padding-right: var(--sf-country-code-item--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-country-code .sf-country-code-item{
    padding-left: var(--sf-country-code-item--padding-inline-end);
  }
  @supports not (padding-inline-end: initial){
  [dir="rtl"] .sf-country-code .sf-country-code-item{
    padding-left: var(--sf-country-code-item--padding-inline-end);
    }
  }
  .sf-country-code .sf-country-code-item:where(:dir(rtl)){
    padding-left: var(--sf-country-code-item--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-country-code .sf-country-code-item{
    padding-left: var(--sf-country-code-item--padding-inline-start);
  }
  @supports not (padding-inline-start: initial){
  html:not([dir="rtl"]) .sf-country-code .sf-country-code-item{
    padding-left: var(--sf-country-code-item--padding-inline-start);
    }
  }
  .sf-country-code .sf-country-code-item:where(:dir(ltr)){
    padding-left: var(--sf-country-code-item--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-country-code .sf-country-code-item{
    padding-right: var(--sf-country-code-item--padding-inline-start);
  }
  @supports not (padding-inline-start: initial){
  [dir="rtl"] .sf-country-code .sf-country-code-item{
    padding-right: var(--sf-country-code-item--padding-inline-start);
    }
  }
  .sf-country-code .sf-country-code-item:where(:dir(rtl)){
    padding-right: var(--sf-country-code-item--padding-inline-start);
  }
  .sf-country-code .sf-country-code-item {
    min-width: 0;
    min-inline-size: 0;
    word-wrap: anywhere;
    border-radius: var(--sf-radius--ui);
    --sf-country-code-item--background-color: transparent;
    --sf-country-code-item--gap: var(--sf-space-1\/3);
    background-color: var(--sf-country-code-item--background-color);
    color: var(--sf-country-code-item--color);
    font-family: var(--sf-country-code-item--font-family);
    font-size: var(--sf-country-code-item--font-size);
    font-weight: var(--sf-country-code-item--font-weight);
    gap: var(--sf-country-code-item--gap);
    line-height: var(--sf-country-code-item--line-height);
    padding-bottom: var(--sf-country-code-item--padding-bottom);
    -webkit-padding-end: var(--sf-country-code-item--padding-inline-end);
            padding-inline-end: var(--sf-country-code-item--padding-inline-end);
    -webkit-padding-start: var(--sf-country-code-item--padding-inline-start);
            padding-inline-start: var(--sf-country-code-item--padding-inline-start);
    padding-top: var(--sf-country-code-item--padding-top);
    --sf-country-code-item--color: var(--sf-on-surface);
  }
  .sf-country-code .sf-country-code-flag {
    flex-shrink: 0;
    --sf-country-code-flag--background-color: transparent;
    background-color: var(--sf-country-code-flag--background-color);
    font-size: var(--sf-country-code-flag--font-size);
    height: var(--sf-country-code-flag--height);
    width: var(--sf-country-code-flag--width);
  }
  .sf-country-code .sf-icon {
    color: var(--sf-on-surface-variant);
    color: var(--sf-icon--color, var(--sf-on-surface-variant));
    font-size: var(--sf-text-size-3);
    font-size: var(--sf-icon--font-size, var(--sf-text-size-3));
    height: var(--sf-text-size-3);
    height: var(--sf-icon--height, var(--sf-text-size-3));
    width: var(--sf-text-size-3);
    width: var(--sf-icon--width, var(--sf-text-size-3));
  }
  .sf-country-code.sf-country-code--size-1 .sf-country-code-text {
    --sf-country-code-text--font-size: var(--sf-text-size-1\/2);
    --sf-country-code-text--line-height: var(--sf-text-height-1\/2);
  }
  .sf-country-code.sf-country-code--size-1 .sf-country-code-required {
    --sf-country-code-required--font-size: var(--sf-text-size-1\/2);
    --sf-country-code-required--line-height: var(--sf-text-height-1\/2);
  }
  .sf-country-code.sf-country-code--size-1 .sf-country-code-field {
    --sf-country-code-field--padding-bottom: calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px));
    --sf-country-code-field--padding-inline-end: var(--sf-ui-1--space-x);
    --sf-country-code-field--padding-inline-start: var(--sf-ui-1--space-x);
    --sf-country-code-field--padding-top: calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px));
  }
  .sf-country-code[\:not-has\(input\:disabled\)] .sf-country-code-field {
    --sf-country-code-field--border-color: var(--sf-outline);
  }
  .sf-country-code:not(:has(input:disabled)) .sf-country-code-field {
    --sf-country-code-field--border-color: var(--sf-outline);
  }
  /* The flag and its chevron sit on the field's line less its two borders, the
     way a text field's input line does, so a phone field is as tall as the
     field beside it (it was 2px taller at every size). */
  .sf-country-code.sf-country-code--size-1 .sf-country-code-flag-icon {
    --sf-country-code-flag-icon--font-size: var(--sf-text-size-6);
    --sf-country-code-flag-icon--height: calc(var(--sf-text-height-1) * 3 / 4);
    --sf-country-code-flag-icon--width: calc(var(--sf-text-height-1) * 3 / 4 * 1.4);
  }
  .sf-country-code.sf-country-code--size-1 .sf-icon {
    --sf-icon--color: var(--sf-on-surface-variant);
  }
  .sf-country-code.sf-country-code--size-1 input {
    --sf-country-code-input--font-size: var(--sf-text-size-1);
    --sf-country-code-input--line-height: var(--sf-text-height-1);
    --sf-country-code-input--padding-inline-end: var(--sf-ui-1--text-space-x);
    --sf-country-code-input--padding-inline-start: var(--sf-ui-1--text-space-x);
  }
  .sf-country-code.sf-country-code--size-1 input, .sf-country-code.sf-country-code--size-2 input, .sf-country-code.sf-country-code--size-1\/2 input {
    --sf-country-code-input--font-family: var(--sf-text--family);
    --sf-country-code-input--font-weight: var(--sf-font-weight-regular);
  }
  .sf-country-code input {
    --sf-country-code-input--color: var(--sf-on-surface);
  }
  .sf-country-code.sf-country-code--size-1 .sf-country-code-hint {
    --sf-country-code-hint--font-size: var(--sf-text-size-1\/2);
    --sf-country-code-hint--line-height: var(--sf-text-height-1\/2);
  }
  .sf-country-code[\:has\(input\:disabled\)] input {
    --sf-country-code-input--color: var(--sf-on-disable);
  }
  .sf-country-code:has(input:disabled) input {
    --sf-country-code-input--color: var(--sf-on-disable);
  }
  .sf-country-code--size-1 .sf-country-code-item, .sf-country-code--size-1\/2 .sf-country-code-item {
    --sf-country-code-item--padding-bottom: var(--sf-ui-1\/2--space-y);
    --sf-country-code-item--padding-inline-end: var(--sf-ui-1\/2--space-y);
    --sf-country-code-item--padding-inline-start: var(--sf-ui-1\/2--space-y);
    --sf-country-code-item--padding-top: var(--sf-ui-1\/2--space-y);
  }
  .sf-country-code--size-1 .sf-country-code-flag, .sf-country-code--size-1\/2 .sf-country-code-flag {
    --sf-country-code-flag--font-size: var(--sf-text-size-3);
    --sf-country-code-flag--height: var(--sf-text-height-1\/3);
    --sf-country-code-flag--width: var(--sf-text-size-3);
  }
  .sf-country-code.sf-country-code--size-1 .sf-country-code-item {
    --sf-country-code-item--font-size: var(--sf-text-size-1);
    --sf-country-code-item--line-height: var(--sf-text-height-1);
  }
  .sf-country-code.sf-country-code--size-1 .sf-country-code-item, .sf-country-code.sf-country-code--size-2 .sf-country-code-item, .sf-country-code.sf-country-code--size-1\/2 .sf-country-code-item {
    --sf-country-code-item--font-family: var(--sf-text--family);
    --sf-country-code-item--font-weight: var(--sf-font-weight-regular);
  }
  .sf-country-code.sf-country-code--size-2 .sf-country-code-text {
    --sf-country-code-text--font-size: var(--sf-text-size-1);
    --sf-country-code-text--line-height: var(--sf-text-height-1);
  }
  .sf-country-code.sf-country-code--size-2 .sf-country-code-required {
    --sf-country-code-required--font-size: var(--sf-text-size-1);
    --sf-country-code-required--line-height: var(--sf-text-height-1);
  }
  .sf-country-code.sf-country-code--size-2 .sf-country-code-field {
    --sf-country-code-field--padding-bottom: calc(var(--sf-ui-2--space-y-tightness-default) - var(--sf-px));
    --sf-country-code-field--padding-inline-end: var(--sf-ui-2--space-x);
    --sf-country-code-field--padding-inline-start: var(--sf-ui-2--space-x);
    --sf-country-code-field--padding-top: calc(var(--sf-ui-2--space-y-tightness-default) - var(--sf-px));
  }
  .sf-country-code.sf-country-code--size-2 .sf-country-code-flag-icon {
    --sf-country-code-flag-icon--font-size: var(--sf-text-size-8);
    --sf-country-code-flag-icon--height: calc(var(--sf-text-height-2) * 3 / 4);
    --sf-country-code-flag-icon--width: calc(var(--sf-text-height-2) * 3 / 4 * 1.4);
  }
  .sf-country-code.sf-country-code--size-2 .sf-icon {
    --sf-icon--font-size: var(--sf-text-size-4);
    --sf-icon--height: var(--sf-text-size-4);
    --sf-icon--width: var(--sf-text-size-4);
  }
  .sf-country-code.sf-country-code--size-2 input {
    --sf-country-code-input--font-size: var(--sf-text-size-2);
    --sf-country-code-input--line-height: var(--sf-text-height-2);
    --sf-country-code-input--padding-inline-end: var(--sf-ui-2--text-space-x);
    --sf-country-code-input--padding-inline-start: var(--sf-ui-2--text-space-x);
  }
  .sf-country-code.sf-country-code--size-2 .sf-country-code-hint {
    --sf-country-code-hint--font-size: var(--sf-text-size-1);
    --sf-country-code-hint--line-height: var(--sf-text-height-1);
  }
  .sf-country-code.sf-country-code--size-2 .sf-country-code-item {
    --sf-country-code-item--padding-bottom: var(--sf-ui-1--space-y);
    --sf-country-code-item--padding-inline-end: var(--sf-ui-1--space-y);
    --sf-country-code-item--padding-inline-start: var(--sf-ui-1--space-y);
    --sf-country-code-item--padding-top: var(--sf-ui-1--space-y);
    --sf-country-code-item--font-size: var(--sf-text-size-2);
    --sf-country-code-item--line-height: var(--sf-text-height-2);
  }
  .sf-country-code.sf-country-code--size-2 .sf-country-code-flag {
    --sf-country-code-flag--font-size: var(--sf-text-size-5);
    --sf-country-code-flag--height: var(--sf-text-height-1\/2);
    --sf-country-code-flag--width: var(--sf-text-size-5);
  }
  .sf-country-code.sf-country-code--size-1\/2 .sf-country-code-text {
    --sf-country-code-text--font-size: var(--sf-text-size-1\/3);
    --sf-country-code-text--line-height: var(--sf-text-height-1\/3);
  }
  .sf-country-code.sf-country-code--size-1\/2 .sf-country-code-required {
    --sf-country-code-required--font-size: var(--sf-text-size-1\/3);
    --sf-country-code-required--line-height: var(--sf-text-height-1\/3);
  }
  .sf-country-code.sf-country-code--size-1\/2 .sf-country-code-field {
    --sf-country-code-field--padding-bottom: calc(var(--sf-ui-1\/2--space-y-tightness-default) - var(--sf-px));
    --sf-country-code-field--padding-inline-end: var(--sf-ui-1\/2--space-x);
    --sf-country-code-field--padding-inline-start: var(--sf-ui-1\/2--space-x);
    --sf-country-code-field--padding-top: calc(var(--sf-ui-1\/2--space-y-tightness-default) - var(--sf-px));
  }
  .sf-country-code.sf-country-code--size-1\/2 .sf-country-code-flag-icon {
    --sf-country-code-flag-icon--font-size: var(--sf-text-size-5);
    --sf-country-code-flag-icon--height: calc(var(--sf-text-height-1\/2) * 3 / 4);
    --sf-country-code-flag-icon--width: calc(var(--sf-text-height-1\/2) * 3 / 4 * 1.4);
  }
  .sf-country-code.sf-country-code--size-1\/2 .sf-icon {
    --sf-icon--font-size: var(--sf-text-size-2);
    --sf-icon--height: var(--sf-text-size-2);
    --sf-icon--width: var(--sf-text-size-2);
  }
  .sf-country-code.sf-country-code--size-1\/2 input {
    --sf-country-code-input--font-size: var(--sf-text-size-1\/2);
    --sf-country-code-input--line-height: var(--sf-text-height-1\/2);
    --sf-country-code-input--padding-inline-end: var(--sf-ui-1\/2--text-space-x);
    --sf-country-code-input--padding-inline-start: var(--sf-ui-1\/2--text-space-x);
  }
  .sf-country-code.sf-country-code--size-1\/2 .sf-country-code-hint {
    --sf-country-code-hint--font-size: var(--sf-text-size-1\/3);
    --sf-country-code-hint--line-height: var(--sf-text-height-1\/3);
  }
  .sf-country-code.sf-country-code--size-1\/2 .sf-country-code-item {
    --sf-country-code-item--font-size: var(--sf-text-size-1\/2);
    --sf-country-code-item--line-height: var(--sf-text-height-1\/2);
  }
  .sf-country-code--size-1 .sf-country-code-field input::-webkit-input-placeholder {
    --sf-country-code-placeholder--font-size: var(--sf-text-size-1);
    --sf-country-code-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-country-code--size-1 .sf-country-code-field input::-moz-placeholder {
    --sf-country-code-placeholder--font-size: var(--sf-text-size-1);
    --sf-country-code-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-country-code--size-1 .sf-country-code-field input:-ms-input-placeholder {
    --sf-country-code-placeholder--font-size: var(--sf-text-size-1);
    --sf-country-code-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-country-code--size-1 .sf-country-code-field input::-ms-input-placeholder {
    --sf-country-code-placeholder--font-size: var(--sf-text-size-1);
    --sf-country-code-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-country-code--size-1 .sf-country-code-field input::placeholder {
    --sf-country-code-placeholder--font-size: var(--sf-text-size-1);
    --sf-country-code-placeholder--line-height: var(--sf-text-height-1);
  }
  .sf-country-code--size-2 .sf-country-code-field input::-webkit-input-placeholder {
    --sf-country-code-placeholder--font-size: var(--sf-text-size-2);
    --sf-country-code-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-country-code--size-2 .sf-country-code-field input::-moz-placeholder {
    --sf-country-code-placeholder--font-size: var(--sf-text-size-2);
    --sf-country-code-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-country-code--size-2 .sf-country-code-field input:-ms-input-placeholder {
    --sf-country-code-placeholder--font-size: var(--sf-text-size-2);
    --sf-country-code-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-country-code--size-2 .sf-country-code-field input::-ms-input-placeholder {
    --sf-country-code-placeholder--font-size: var(--sf-text-size-2);
    --sf-country-code-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-country-code--size-2 .sf-country-code-field input::placeholder {
    --sf-country-code-placeholder--font-size: var(--sf-text-size-2);
    --sf-country-code-placeholder--line-height: var(--sf-text-height-2);
  }
  .sf-country-code--size-1\/2 .sf-country-code-field input::-webkit-input-placeholder {
    --sf-country-code-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-country-code-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-country-code--size-1\/2 .sf-country-code-field input::-moz-placeholder {
    --sf-country-code-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-country-code-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-country-code--size-1\/2 .sf-country-code-field input:-ms-input-placeholder {
    --sf-country-code-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-country-code-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-country-code--size-1\/2 .sf-country-code-field input::-ms-input-placeholder {
    --sf-country-code-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-country-code-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-country-code--size-1\/2 .sf-country-code-field input::placeholder {
    --sf-country-code-placeholder--font-size: var(--sf-text-size-1\/2);
    --sf-country-code-placeholder--line-height: var(--sf-text-height-1\/2);
  }
  .sf-country-code[\:has\(input\:disabled\)] .sf-country-code-field {
    --sf-country-code-field--border-color: var(--sf-outline-disable);
  }
  .sf-country-code:has(input:disabled) .sf-country-code-field {
    --sf-country-code-field--border-color: var(--sf-outline-disable);
  }
  .sf-country-code[\:has\(input\:disabled\)] .sf-country-code-flag-icon {
    --sf-country-code-flag-icon--opacity: var(--sf-opacity-60);
  }
  .sf-country-code:has(input:disabled) .sf-country-code-flag-icon {
    --sf-country-code-flag-icon--opacity: var(--sf-opacity-60);
  }
  .sf-country-code[\:has\(input\:disabled\)] .sf-icon {
    /* The disabled role for what is drawn on a surface, not the one for a
       boundary. The two carry the same value today, so this changed nothing a
       person sees -- and a theme that retunes one of them separately would have
       found a glyph taking the colour of a border. */
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-country-code:has(input:disabled) .sf-icon {
    /* The disabled role for what is drawn on a surface, not the one for a
       boundary. The two carry the same value today, so this changed nothing a
       person sees -- and a theme that retunes one of them separately would have
       found a glyph taking the colour of a border. */
    --sf-icon--color: var(--sf-on-disable);
  }
  .sf-country-code[\:has\(input\:disabled\)] .sf-country-code-field input::-webkit-input-placeholder {
    --sf-country-code-placeholder--color: var(--sf-on-disable);
  }
  .sf-country-code[\:has\(input\:disabled\)] .sf-country-code-field input::-moz-placeholder {
    --sf-country-code-placeholder--color: var(--sf-on-disable);
  }
  .sf-country-code[\:has\(input\:disabled\)] .sf-country-code-field input:-ms-input-placeholder {
    --sf-country-code-placeholder--color: var(--sf-on-disable);
  }
  .sf-country-code[\:has\(input\:disabled\)] .sf-country-code-field input::-ms-input-placeholder {
    --sf-country-code-placeholder--color: var(--sf-on-disable);
  }
  .sf-country-code[\:has\(input\:disabled\)] .sf-country-code-field input::placeholder {
    --sf-country-code-placeholder--color: var(--sf-on-disable);
  }
  .sf-country-code:has(input:disabled) .sf-country-code-field input::-webkit-input-placeholder {
    --sf-country-code-placeholder--color: var(--sf-on-disable);
  }
  .sf-country-code:has(input:disabled) .sf-country-code-field input::-moz-placeholder {
    --sf-country-code-placeholder--color: var(--sf-on-disable);
  }
  .sf-country-code:has(input:disabled) .sf-country-code-field input:-ms-input-placeholder {
    --sf-country-code-placeholder--color: var(--sf-on-disable);
  }
  .sf-country-code:has(input:disabled) .sf-country-code-field input::-ms-input-placeholder {
    --sf-country-code-placeholder--color: var(--sf-on-disable);
  }
  .sf-country-code:has(input:disabled) .sf-country-code-field input::placeholder {
    --sf-country-code-placeholder--color: var(--sf-on-disable);
  }
  .sf-country-code[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\).focus-visible\)] .sf-country-code-field {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-country-code:has(input:enabled:not(:disabled):not(.disabled).focus-visible) .sf-country-code-field {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-country-code[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:focus-visible\)] .sf-country-code-field {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  .sf-country-code:has(input:enabled:not(:disabled):not(.disabled):focus-visible) .sf-country-code-field {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: var(--sf-focus--offset);
  }
  /* The global :focus-visible rule paints the ring on whatever holds the focus.
     Here the focus lives on the bare control while the ring belongs to the part
     the person sees, so the control gives its own ring up: one component, one
     ring. */
  .sf-country-code .sf-country-code-field input.focus-visible {
    outline: none;
  }
  .sf-country-code .sf-country-code-field input:focus-visible {
    outline: none;
  }
  .sf-country-code[\:has\(input\:enabled\:not\(\:disabled\)\:not\(.disabled\)\:hover\)] .sf-country-code-field {
    --sf-country-code-field--border-color: var(--sf-primary-hover);
  }
  .sf-country-code:has(input:enabled:not(:disabled):not(.disabled):hover) .sf-country-code-field {
    --sf-country-code-field--border-color: var(--sf-primary-hover);
  }
  /* utility-hint: flex/1 (.flex-1) display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  .sf-country-code.open .sf-country-code-list {
    /* Поднят: поверхность берёт ступень своей высоты, иначе в тёмной теме
       подъём не виден — там чёрная тень ничего не даёт. */
    --sf-country-code-list--background-color: var(--sf-elevation-3--surface);
    --sf-on-surface-variant: var(--sf-on-elevation-3--variant);
    --sf-country-code-list--box-shadow: var(--sf-elevation-3--shadow);
    --sf-country-code-list--padding-bottom: var(--sf-space-1\/3);
    --sf-country-code-list--padding-inline-end: var(--sf-space-1\/3);
    --sf-country-code-list--padding-inline-start: var(--sf-space-1\/3);
    --sf-country-code-list--padding-top: var(--sf-space-1\/3);
  }
}
@layer sf.components {
  .sf-country-code {
    position: relative;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-country-code .sf-country-code-list{
    left: 0;
  }
  @supports not (inset-inline-start: initial){
  html:not([dir="rtl"]) .sf-country-code .sf-country-code-list{
    left: 0;
    }
  }
  .sf-country-code .sf-country-code-list:where(:dir(ltr)){
    left: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-country-code .sf-country-code-list{
    right: 0;
  }
  @supports not (inset-inline-start: initial){
  [dir="rtl"] .sf-country-code .sf-country-code-list{
    right: 0;
    }
  }
  .sf-country-code .sf-country-code-list:where(:dir(rtl)){
    right: 0;
  }
  .sf-country-code .sf-country-code-list {
    position: absolute;
    inset-inline-start: 0;
    top: 100%;
    inset-block-start: 100%;
    width: 100%;
    inline-size: 100%;
    z-index: 9;
  }
  .sf-country-code-left, .sf-country-code-item {
    cursor: pointer;
  }
  .sf-country-code-item:hover {
    background: var(--sf-surface-container-hover);
  }
  /* The field is as tall as a text field of its size, by the same rule. */
  .sf-country-code.sf-country-code--size-1\/2 .sf-country-code-field {
    height: var(--sf-ui-1\/2--control-height);
    block-size: var(--sf-ui-1\/2--control-height);
  }
  .sf-country-code.sf-country-code--size-1 .sf-country-code-field {
    height: var(--sf-ui-1--control-height);
    block-size: var(--sf-ui-1--control-height);
  }
  .sf-country-code.sf-country-code--size-2 .sf-country-code-field {
    height: var(--sf-ui-2--control-height);
    block-size: var(--sf-ui-2--control-height);
  }
  /* The chevron beside the flag takes the field line, like every icon on it. */
  .sf-country-code.sf-country-code--size-1\/2 .sf-country-code-left .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1\/2);
    --sf-icon--height: var(--sf-text-height-1\/2);
    --sf-icon--width: var(--sf-text-height-1\/2);
  }
  .sf-country-code.sf-country-code--size-1 .sf-country-code-left .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-1);
    --sf-icon--height: var(--sf-text-height-1);
    --sf-icon--width: var(--sf-text-height-1);
  }
  .sf-country-code.sf-country-code--size-2 .sf-country-code-left .sf-icon {
    --sf-icon--font-size: var(--sf-text-height-2);
    --sf-icon--height: var(--sf-text-height-2);
    --sf-icon--width: var(--sf-text-height-2);
  }
  .sf-country-code--fixed-dial-code .sf-country-code-left {
    cursor: default;
  }
  .sf-country-code--fixed-dial-code .sf-country-code-left .sf-icon {
    display: none;
  }
  .sf-country-code img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .sf-country-code:not(.open) .sf-country-code-list {
    display: none;
  }
  .sf-country-code .sf-country-code-left.focus-visible,
  .sf-country-code .sf-country-code-item.focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-country-code .sf-country-code-left:focus-visible,
  .sf-country-code .sf-country-code-item:focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  @media (forced-colors: active) {
    .sf-country-code[\:has\(input\:not\(\:disabled\).focus-visible\)] .sf-country-code-field {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
    }
    .sf-country-code:has(input:not(:disabled).focus-visible) .sf-country-code-field {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
    }
    .sf-country-code[\:has\(input\:not\(\:disabled\)\:focus-visible\)] .sf-country-code-field {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
    }
    .sf-country-code:has(input:not(:disabled):focus-visible) .sf-country-code-field {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: var(--sf-focus-outline-width);
    }
    .sf-country-code .sf-country-code-left.focus-visible,
    .sf-country-code .sf-country-code-item.focus-visible {
      outline-color: Highlight;
    }
    .sf-country-code .sf-country-code-left:focus-visible,
    .sf-country-code .sf-country-code-item:focus-visible {
      outline-color: Highlight;
    }
  }
}
@layer sf.states {
  /* The country list is the field's own list, so it follows the dropdown's
     composition: a row as tall as the field, the flag the field's flag (three
     quarters of the line, 1.4 times as wide) on the field flag's axis, the name
     at the size's text step after it. The option gives back the list's inset and
     adds the field's border. In the states layer, because the generated per-size
     rules mixed rungs (a size 2 row took size 1 spacing) and must not win. */
  .sf-country-code.sf-country-code--size-1\/2 .sf-country-code-item {
    --sf-country-code-item--font-size: var(--sf-text-size-1\/2);
    --sf-country-code-item--line-height: var(--sf-text-height-1\/2);
    --sf-country-code-item--gap: var(--sf-ui-1\/2--text-space-x);
    --sf-country-code-item--padding-top: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-country-code-item--padding-bottom: var(--sf-ui-1\/2--space-y-tightness-default);
    --sf-country-code-item--padding-inline-start: calc(var(--sf-ui-1\/2--space-x) + var(--sf-px) - var(--sf-country-code-list--padding-inline-start, 0px));
    --sf-country-code-item--padding-inline-end: calc(var(--sf-ui-1\/2--space-x) + var(--sf-px) - var(--sf-country-code-list--padding-inline-end, 0px));
  }
  .sf-country-code.sf-country-code--size-1\/2 .sf-country-code-item .sf-country-code-flag {
    --sf-country-code-flag--height: calc(var(--sf-text-height-1\/2) * 3 / 4);
    --sf-country-code-flag--width: calc(var(--sf-text-height-1\/2) * 3 / 4 * 1.4);
    flex-shrink: 0;
  }
  .sf-country-code.sf-country-code--size-1 .sf-country-code-item {
    --sf-country-code-item--font-size: var(--sf-text-size-1);
    --sf-country-code-item--line-height: var(--sf-text-height-1);
    --sf-country-code-item--gap: var(--sf-ui-1--text-space-x);
    --sf-country-code-item--padding-top: var(--sf-ui-1--space-y-tightness-default);
    --sf-country-code-item--padding-bottom: var(--sf-ui-1--space-y-tightness-default);
    --sf-country-code-item--padding-inline-start: calc(var(--sf-ui-1--space-x) + var(--sf-px) - var(--sf-country-code-list--padding-inline-start, 0px));
    --sf-country-code-item--padding-inline-end: calc(var(--sf-ui-1--space-x) + var(--sf-px) - var(--sf-country-code-list--padding-inline-end, 0px));
  }
  .sf-country-code.sf-country-code--size-1 .sf-country-code-item .sf-country-code-flag {
    --sf-country-code-flag--height: calc(var(--sf-text-height-1) * 3 / 4);
    --sf-country-code-flag--width: calc(var(--sf-text-height-1) * 3 / 4 * 1.4);
    flex-shrink: 0;
  }
  .sf-country-code.sf-country-code--size-2 .sf-country-code-item {
    --sf-country-code-item--font-size: var(--sf-text-size-2);
    --sf-country-code-item--line-height: var(--sf-text-height-2);
    --sf-country-code-item--gap: var(--sf-ui-2--text-space-x);
    --sf-country-code-item--padding-top: var(--sf-ui-2--space-y-tightness-default);
    --sf-country-code-item--padding-bottom: var(--sf-ui-2--space-y-tightness-default);
    --sf-country-code-item--padding-inline-start: calc(var(--sf-ui-2--space-x) + var(--sf-px) - var(--sf-country-code-list--padding-inline-start, 0px));
    --sf-country-code-item--padding-inline-end: calc(var(--sf-ui-2--space-x) + var(--sf-px) - var(--sf-country-code-list--padding-inline-end, 0px));
  }
  .sf-country-code.sf-country-code--size-2 .sf-country-code-item .sf-country-code-flag {
    --sf-country-code-flag--height: calc(var(--sf-text-height-2) * 3 / 4);
    --sf-country-code-flag--width: calc(var(--sf-text-height-2) * 3 / 4 * 1.4);
    flex-shrink: 0;
  }
}