@layer components {
  [data-coco][data-component="stamp"] {
    &:not([data-style="compact"]) {
      @apply rounded-full relative;

      .coco-icon {
        @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
      }

      /* Sizes */

      &[data-size="xs"] {
        @apply w-6 h-6;
      }

      &[data-size="sm"] {
        @apply w-7 h-7;
      }

      &[data-size="md"] {
        @apply w-9 h-9;
      }

      &[data-size="lg"] {
        @apply w-11 h-11;
      }
    }

    /* Themes */

    &[data-theme="positive"] {
      &[data-style="subtle"] {
        @apply bg-green-200 text-content-positive;
      }

      &[data-style="vivid"] {
        @apply bg-background-positive text-content-light-1;
      }

      &[data-style="inverse"] {
        @apply bg-green-700 text-content-light-1;
      }

      &[data-style="compact"] {
        @apply text-content-positive;
      }
    }

    &[data-theme="negative"] {
      &[data-style="subtle"] {
        @apply bg-red-200 text-content-negative;
      }

      &[data-style="vivid"] {
        @apply bg-background-negative text-content-light-1;
      }

      &[data-style="inverse"] {
        @apply bg-red-700 text-content-light-1;
      }

      &[data-style="compact"] {
        @apply text-content-negative;
      }
    }

    &[data-theme="warning"] {
      &[data-style="subtle"] {
        @apply bg-amber-100 text-content-warning;
      }

      &[data-style="vivid"] {
        @apply bg-background-warning text-content-light-1;
      }

      &[data-style="inverse"] {
        @apply bg-amber-600 text-content-light-1;
      }

      &[data-style="compact"] {
        @apply text-content-warning;
      }
    }

    &[data-theme="info"] {
      &[data-style="subtle"] {
        @apply bg-blue-200 text-content-info;
      }

      &[data-style="vivid"] {
        @apply bg-background-info text-content-light-1;
      }

      &[data-style="inverse"] {
        @apply bg-blue-700 text-content-light-1;
      }

      &[data-style="compact"] {
        @apply text-content-info;
      }
    }
  }
}