@layer components {
  :root {
    --brand-logo__height: 2.5rem;
  }

  .brand-logo__container {
    @apply hidden; /* flex is applied in data-src selector */

    :root[alignment-logo="start"] & {
      @apply justify-start;
    }

    :root[alignment-logo="center"] & {
      @apply justify-center;
    }

    :root[alignment-logo="end"] & {
      @apply justify-end;
    }

    :root[alignment-logo="hidden"] & {
      @apply hidden;
    }
  }

  .brand-logo {
    /* Use object-contain to maintain aspect ratio. */
    @apply object-contain;
  }

  .brand-logo--default {
    /* In preflight.css, image has been given max-width: 100% and height: auto */
    /* See https://tailwindcss.com/docs/preflight#images-are-constrained-to-the-parent-width */

    /* In here, we try to be more explicit */
    /* 1. Tell the browser to set the image dimension according to its aspect ratio. */
    @apply w-auto h-auto;
    /* 2. But the max-width cannot be larger than the parent */
    @apply max-w-full;
    /* 3. Apply the variable to max-height so that the used height is clipped when width == max-width (100%) */
    max-height: var(--brand-logo__height);
  }

  /* Below data-src selector is a workaround until css :has() is widely-supported */
  /* The light logo is visible only in light mode and src is non-empty. */
  :root:not(.dark) .brand-logo__container.light:not([data-src=""]) {
    @apply flex;
  }
  /* The dark logo is visible only in dark mode and src is non-empty. */
  :root.dark .brand-logo__container.dark:not([data-src=""]) {
    @apply flex;
  }
}
