@layer control {
  .iti { width: 100%; }

  .iti__tel-input,
  .iti input[type="tel"] {
    width: 100%;
    padding: .55rem .7rem;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
  }

  .iti__tel-input:hover { border-color: var(--ink-faint); }

  .iti input[type="tel"][aria-invalid="true"] {
    border-width: 2px;
    border-color: var(--stop);
  }

  .iti__selected-country { border-radius: var(--radius) 0 0 var(--radius); }

  .iti__country-list,
  .iti__dropdown-content {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
  }

  .iti__search-input {
    background: var(--surface);
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
  }
}