style-categorize.css

#tagForm {
  display: grid;
  gap: 0.25em;
}

#emojicons {
  height: 20em;
  position: relative;
  display: block;
}

#emojicons::before {
  content: "You're all done with this tag! (=^ェ^=)";

  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;
}

.emote-wrapper-voting {
  position: absolute;
  inset: 0;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em 1em;
  padding: 1em;

  border-radius: 2em;

  grid-area: 1 / 1;
  --tint: oklch(71.36% 0.14 240.35);
  background-color: color-mix(in srgb, white 85%, var(--tint));
  border: 1px solid var(--tint);
  transform-origin: 50% 70%;
  transform: scale(1) translateY(0%) translateX(0%);

  --anim-data: 300ms;

  transition:
    opacity var(--anim-data),
    background-color var(--anim-data),
    border var(--anim-data),
    transform var(--anim-data);
}

@media (pointer:coarse) {
  .emote-wrapper-voting {
    --anim-data: 450ms linear;
  }
}

.emote-wrapper-voting.voted {
  pointer-events: none;
  opacity: 0;
}

.emote-wrapper-voting.voted.yes {
  transform: scale(0.7) translateY(-50%) translateX(-50%);
  --tint: green;
}

.emote-wrapper-voting.voted.no {
  transform: scale(0.7) translateY(-50%) translateX(50%);
  --tint: red;
}


.emote-wrapper-voting>p {
  text-align: center;
  grid-column: span 2;

  &.emote-display {
    height: 3em;
  }
}

.emote-wrapper-voting button {
  height: 5em;
  width: 100%;
  max-width: 15em;

  border-radius: 0.5em;

  --background: black;
  background-color: color-mix(in srgb, white, var(--background) 10%);
  border: 1px solid var(--background);
}

.emote-wrapper-voting button.yes {
  --background: green;
  justify-self: end;
}

.emote-wrapper-voting button.no {
  --background: red;
  justify-self: start;
}

.emote-wrapper-voting button:hover {
  background-color: color-mix(in srgb, white, var(--background) 15%);
}

.emote-wrapper-voting button:active {
  background-color: color-mix(in srgb, white, var(--background) 20%);
}

select#search {
  cursor: pointer;
}


select#search,
#undo,
#saveCategories,
#saveAndExportCategories {
  height: 3em;
  padding-inline: 1em;
  border: 1px solid color-mix(in srgb, currentColor, transparent);
  border-radius: 0.25em;
}

section.buttons {
  margin-block-start: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;

  #undo {
    grid-column: span 2;
  }
}