@layer components {
  .contact-import {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
  }

  .contact-import__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .contact-import__ways {
    display: grid;
    grid-auto-columns: minmax(var(--space-0), var(--track-fill));
    grid-auto-flow: column;
    gap: var(--space-4);
  }

  .contact-import__way {
    display: flex;
  }

  .contact-import__tile {
    --icon-size: var(--button-icon-size);

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    inline-size: var(--size-fill);
    min-block-size: var(--tap-min);
    padding: var(--space-4) var(--space-2);
    border-radius: var(--radius-button);
    background-color: var(--color-surface-sunken);
    color: var(--color-link);
    font: var(--type-label);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .contact-import__way:only-child .contact-import__tile {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-4);
    font: var(--type-button);
  }

  .contact-import__input {
    position: absolute;
    inset: var(--space-0);
    opacity: var(--opacity-none);
    cursor: pointer;
  }

  .contact-import__hint {
    display: none;
    font: var(--type-caption);
    color: var(--color-ink-faint);
  }

  .contact-import__problem {
    font: var(--type-caption);
    color: var(--color-danger);
    text-wrap: pretty;
  }

  .contact-import__drop {
    --icon-size: var(--button-icon-size-large);

    position: absolute;
    inset: var(--space-0);
    z-index: var(--z-raised);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    border: var(--border-width-strong) dashed var(--color-accent);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    color: var(--color-accent-ink);
    font: var(--type-heading);
    text-align: center;
    pointer-events: none;
  }

  .contact-import[data-dropping] .contact-import__drop {
    display: flex;
  }

  @media (any-hover: hover) {
    .contact-import__hint {
      display: block;
    }

    .contact-import__tile:hover {
      background-color: var(--color-chip);
    }
  }
}