@layer components {
  [data-coco][data-component="color-picker"] {
    @apply bg-background-light-2;

    .picker-section:not(:first-child) {
      @apply border-t border-gray-transparent-100;
    }

    &:not(.picker-color-wheel-open) .picker-display-section {
      padding-bottom: 0 !important;
    }

    .picker-display-section {
      @apply flex items-center;
    }

    .picker-display {
      @apply flex items-center gap-2 px-2 border border-content-light-2 max-w-full bg-background-light-1;

      &.picker-error {
        @apply border-negative-200;
      }
    }

    .picker-display-color {
      @apply rounded-full border border-gray-transparent-200 flex-none;
    }

    .picker-display-input {
      @apply p-0 focus:ring-0 border-none bg-background-light-1 w-full text-black;
    }

    .picker-swatches {
      @apply grid grid-cols-6 auto-rows-auto gap-y-2;
    }

    .picker-swatch {
      @apply rounded-full flex-none border border-gray-transparent-200 cursor-pointer mx-auto;

      &.swatch-current {
        @apply outline outline-1 outline-content-dark-muted;
      }
    }

    /* Sizes */

    &[data-size="sm"] {
      @apply color-picker-sm;
    }

    &[data-size="md"] {
      @apply color-picker-md;
    }

    @media screen(md) {
      &[data-size-md="sm"] {
        @apply color-picker-sm;
      }

      &[data-size-md="md"] {
        @apply color-picker-md;
      }
    }

    @media screen(lg) {
      &[data-size-lg="sm"] {
        @apply color-picker-sm;
      }

      &[data-size-lg="md"] {
        @apply color-picker-md;
      }
    }

    @media screen(xl) {
      &[data-size-xl="sm"] {
        @apply color-picker-sm;
      }

      &[data-size-xl="md"] {
        @apply color-picker-md;
      }
    }
  }
}

@layer utilities {
  .color-picker-sm {
    @apply p-6;
    width: 242px;

    .picker-section:not(:first-child) {
      @apply pt-5;
    }

    .picker-section:not(:last-child) {
      @apply pb-5;
    }

    .picker-swatch {
      @apply w-6 h-6;

      &.swatch-current {
        @apply outline-offset-2;
      }
    }

    .picker-display-section {
      @apply gap-2;
    }

    .picker-display-input {
      @apply para-sm h-9;
    }

    .picker-display-color {
      @apply w-5 h-5;
    }
  }

  .color-picker-md {
    @apply p-8;
    width: 304px;

    .picker-section:not(:first-child) {
      @apply pt-6;
    }

    .picker-section:not(:last-child) {
      @apply pb-6;
    }

    .picker-swatch {
      @apply w-7 h-7 mx-auto;

      &.swatch-current {
        @apply outline-offset-[3];
      }
    }

    .picker-display-section {
      @apply gap-3;
    }

    .picker-display-input {
      @apply para-md h-11;
    }

    .picker-display-color {
      @apply w-6 h-6;
    }
  }
}