@layer components {
  /* Sized by height so wide logos keep their shape */
  .account-logo {
    block-size: 4rem;
    display: block;
    margin-block: var(--block-space-half);
    inline-size: auto;
    max-inline-size: 100%;
    object-fit: contain;
  }

  /* Settings previews each logo on the background it's made for, so one that would vanish there shows it */
  .account-logo--on-white,
  .account-logo--on-black {
    border: var(--border);
    border-radius: var(--radius);
    padding: var(--block-space-half);
  }

  .account-logo--on-white {
    background-color: var(--color-white);
    color: var(--color-black);
  }

  .account-logo--on-black {
    background-color: var(--color-black);
    color: var(--color-white);
  }

  /* The logo and dark mode logo side by side, stacking where they don't fit */
  .logo-pickers {
    display: grid;
    gap: var(--block-space) var(--inline-space-double);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }

  /* The logo, or a placeholder without one, opens the file chooser */
  .logo-picker {
    cursor: pointer;
    display: block;

    .account-logo {
      margin-block: 0;
    }

    @media (any-hover: hover) {
      &:hover :is(.account-logo, .logo-picker__placeholder) {
        border-color: var(--color-ink-medium);
      }
    }

    &:has(:focus-visible) {
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .logo-picker__placeholder {
    --icon-size: 1.75rem;

    aspect-ratio: 1;
    block-size: 4rem;
    border: 1px dashed var(--color-ink-light);
    display: grid;
    place-items: center;

    .icon {
      opacity: 0.5;
    }
  }
}