gram: luck

> ./src/index.css

Lenses
(coming soon!)

@tailwind base;
@tailwind components;
@tailwind utilities;

.icon {
  display: inline-block;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  width: 1em;
  height: 1em;

  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

.icon-plus {
  mask-image: url("assets/plus-icon.svg");
  -webkit-mask-image: url("assets/plus-icon.svg");
}

.icon-asterisk {
  mask-image: url('assets/asterisk-icon.svg');
  -webkit-mask-image: url('assets/asterisk-icon.svg');
}

.icon-expandable {
  transition: transform 100ms ease-in-out;
  mask-image: url('assets/chevron-forward.svg');
  -webkit-mask-image: url('assets/chevron-forward.svg');
}

.icon-expandable.is-expanded {
  transform: rotate(90deg);
}

.button {
  @apply px-3 py-1 bg-blue-500 text-white rounded;
}

.cm-focused .cm-highlight-selection,
.cm-highlight-hover {
  @apply bg-yellow-200
}

.cm-highlight-replace {
  @apply hidden;
}

.rbc-event:hover {
  @apply bg-blue-500;
}

.cm-highlight {
  padding-bottom: 2px;
  background-image: url(./assets/splat-underline-2-default.svg);
  background-size: 100% 4px;
  background-position: bottom;
  background-repeat: no-repeat;
}

input[type="range"] {
  @apply h-1 w-14;
  background-image: url(./assets/slider-track.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
  @apply h-1.5 w-1.5 rounded-full cursor-ew-resize;
  background-image: url(./assets/slider-handle.svg);
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-appearance: none;
}

.annotation-token {
  @apply font-mono text-sm;
  color: #1355ff;
  background-image: url(./assets/whiteout.svg);
  background-size: auto 100%;
  background-repeat: repeat-x;
  font-family: "Schoolbell", sans-serif;
  font-size: 16px;
}

/* z-index hack */

div[data-radix-popper-content-wrapper] {
  z-index: 9999 !important;
}