@reference "../../styles/index.css";

.root {
  @apply after:bg-gradient-radial
    @container/preview
    relative
    flex
    aspect-[1.90/1]
    items-center
    rounded-sm
    border
    border-neutral-900
    bg-neutral-950
    after:absolute
    after:inset-0
    after:m-auto
    after:aspect-square
    after:w-1/3
    after:rounded-full
    after:blur-2xl
    after:content-[''];

  &.announcements {
    @apply after:from-brand-700/90;
  }

  &.release {
    @apply after:from-info-600/90;
  }

  &.vulnerability {
    @apply after:from-warning-600/90;
  }

  .container {
    @apply z-10
      mx-auto
      flex
      w-2/3
      max-w-xl
      flex-col
      gap-4
      text-center
      text-xs
      font-semibold
      text-white
      @sm/preview:text-base
      @md/preview:gap-6
      @md/preview:text-lg
      @lg/preview:gap-8
      @lg/preview:text-xl
      @xl/preview:gap-12
      @xl/preview:text-2xl
      @2xl/preview:text-3xl;

    .hexagon {
      @apply absolute
        inset-0
        m-auto
        size-full
        @md/preview:h-3/5
        @md/preview:w-3/5
        @lg/preview:h-2/3
        @lg/preview:w-2/3
        @xl/preview:h-3/5
        @xl/preview:w-3/5
        @2xl/preview:h-2/3
        @2xl/preview:w-2/3;
    }

    .logo {
      @apply mx-auto
        size-6
        @md/preview:size-14
        @lg/preview:size-16
        @xl/preview:size-20;
    }
  }
}
