commerce/components/product/Swatch/Swatch.module.css

.root {
  composes: root from 'components/ui/Button/Button.module.css';
  @apply h-12 p-0 bg-primary text-primary rounded-full mr-3 inline-flex
  items-center justify-center cursor-pointer transition duration-150 ease-in-out
   shadow-none border-gray-200 border box-border;

  min-width: 3em;

  & > span {
    @apply absolute;
  }

  &:hover {
    @apply transform scale-110 bg-hover;
  }
}

.size {
  @apply px-3;
}

.color {
  @apply text-black transition duration-150 ease-in-out;

  &:hover {
    @apply text-black;
  }

  &.dark,
  &.dark:hover {
    color: white !important;
  }
}

.active {
  &.size {
    @apply border-accents-9 border-2;
  }
}