@layer components {
  [data-coco][data-component="option-bar"] {
    @apply border border-gray-transparent-100 p-1 bg-gray-transparent-50;

    border-radius: 44px;
    width: fit-content;

    .option-bar-buttons {
      @apply flex items-center gap-x-2;
      width: fit-content;

      .coco-button {
        @apply !border-none;
      }

      .selected {
        @apply pointer-events-none;
      }
    }

    &[data-size="xs"] {
      padding: calc(0.25rem - 1px);

      .option-bar-buttons {
        @apply gap-x-1;
      }
    }
  }
}