/**
 * Stash Vue component utilities – legacy layout, tooltip, animation, and transition helpers.
 *
 * These styles are Vue-specific utilities and effects that used to live in base.css.
 */

/**
 * Legacy button-grid class.
 *
 * Todo: Create ButtonGrid component with styles below and remove button grid styles from Button.vue
 * https://leaflink.atlassian.net/browse/STASH-230
 */
.button-grid {
  display: flex;
  grid-column-end: -1 !important;

  > .button {
    width: 50%;
  }

  > .button + .button {
    margin-left: --spacing(6);
  }

  @media (width >= theme(--breakpoint-md)) {
    display: inline-flex;

    > .button {
      width: auto;
    }
  }
}

.tooltip {
  --offset: 0;

  background: var(--color-ice-900);
  border-radius: var(--radius-sm);
  box-shadow:
    0 0 #0000,
    0 0 #0000,
    0 2px 2px 0 rgb(38 38 38 / 5%),
    0 2px 6px 0 rgb(38 38 38 / 10%);
  color: var(--color-white);
  font-size: 0.75rem;
  line-height: calc(16 / 12);
  opacity: 0;
  padding: --spacing(3);
  pointer-events: none; /* Tooltips should disappear once the user hovers away */
  position: absolute;
  text-align: center;
  transition:
    opacity 150ms var(--ease-swing),
    visibility 150ms var(--ease-swing);
  visibility: hidden;
  white-space: normal;
  width: 148px;

  &::after {
    background-color: var(--color-ice-900);
    border-radius: 0 2px 0 0;
    clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
    content: "";
    display: inline-block;
    height: 12px;
    position: absolute;
    top: calc(-1 * --spacing(1.5));
    transform: rotate(135deg);
    z-index: var(--z-index-behind);
    width: 12px;
  }
}

.tooltip--bottom,
.tooltip--top {
  left: calc(50% + calc(var(--offset) * 1px));
  transform: translateX(-50%);

  &::after {
    left: calc(var(--arrow-position-centered) + calc(var(--offset) * -1px));
  }
}

.tooltip--bottom {
  top: var(--tooltip-position);

  &::after {
    transform: rotate(-45deg);
  }
}

.tooltip--top {
  bottom: var(--tooltip-position);

  &::after {
    top: calc(100% - --spacing(1.5));
  }
}

.tooltip--left,
.tooltip--right {
  top: 50%;
  transform: translateY(-50%);

  &::after {
    top: var(--arrow-position-centered);
  }
}

.tooltip--left {
  right: var(--tooltip-position);

  &::after {
    left: calc(100% - --spacing(1.5));
    transform: rotate(45deg);
  }
}

.tooltip--right {
  left: var(--tooltip-position);

  &::after {
    left: calc(-1 * --spacing(1.5));
    transform: rotate(-135deg);
  }
}

.tooltip-toggle {
  display: inline-block;
  position: relative;
  z-index: 0;

  &:hover {
    outline: none;
    z-index: var(--z-index-modal);

    .tooltip {
      opacity: 0.95;
      visibility: visible;
    }
  }
}

/**
 * Animations – keyframes live in @leaflink/stash-theme/tokens (motion.css); classes reference theme tokens.
 */

.fx-shake {
  animation: 2s shake 1;
}

.fx-pulse {
  animation: var(--stash-animate-pulse);
}

.fx-spin {
  animation: var(--stash-animate-spin-loading);
}

.fx-flash {
  animation: var(--stash-animate-flash);
}

/**
 * Transitions
 *
 * Todo: These should be moved to tailwind as custom transitions.
 * See: https://tailwindcss.com/docs/transition-property
 */

.scale-enter-active,
.scale-leave-active {
  transition: 300ms var(--ease-in-out);
}

.scale-enter-from,
.scale-leave-from,
.scale-leave-to {
  opacity: 0;
  transform: scale(0);
}

.slide-y-enter-active,
.slide-y-leave-active {
  transition: 150ms var(--ease-swing);
}

.slide-y-enter-from,
.slide-y-leave-to {
  opacity: 0;
  transform: translateY(-0.875rem);
}

.slide-x-enter-active,
.slide-x-leave-active {
  transition: 150ms var(--ease-swing);
}

.slide-x-enter-from,
.slide-x-leave-to {
  opacity: 0;
  transform: translateX(-0.875rem);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 150ms var(--ease-swing);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to {
  opacity: 1;
}

.expand-enter-active,
.expand-leave-active {
  transition:
    height 300ms var(--ease-in-out),
    opacity 500ms 150ms,
    transform 500ms 150ms;
}

.expand-enter-from,
.expand-leave-to {
  height: 0;
  opacity: 0;
  transform: translateY(-0.875rem);
  transition-delay: 0s;
}

.expand-leave-from,
.expand-enter-to {
  height: auto;
  opacity: 1;
  transform: translateY(0);
}

.move-move {
  transition: transform 150ms var(--ease-swing);
}

#launcher {
  filter: drop-shadow(4px 18px 18px rgb(38 38 38 / 5%))
    drop-shadow(4px 18px 18px rgb(38 38 38 / 10%))
    drop-shadow(4px 18px 30px rgb(38 38 38 / 15%));
}

/**
 * Rich text authored in the Stash TextEditor (Quill). Apply `stash-rich-text` to the element that
 * holds the sanitized HTML (e.g. the target of the v-sanitize-html directive).
 *
 * Quill emits each list as one flat <ol>; nesting is encoded as ql-indent-N classes on the <li>,
 * not as real nested lists, and every <li> carries data-list="ordered" or "bullet". Markers are
 * redrawn from those attributes because the reset strips the native ones, and a native ordered
 * marker would also number the bullet items. Each indent level keeps its own counter — the way
 * the editor does — so an indented ordered list restarts at 1 instead of continuing the count of
 * the level above it. The per-level reset uses `counter-set` (not `counter-reset`, which would
 * start a fresh counter on every sibling), and the deeper-level rules win on specificity so the
 * current level keeps counting while the levels below it reset.
 */
.stash-rich-text {
  ol,
  ul {
    padding-left: 1.5em;
  }

  ol {
    counter-reset: stash-rich-text-0 stash-rich-text-1 stash-rich-text-2
      stash-rich-text-3 stash-rich-text-4 stash-rich-text-5 stash-rich-text-6
      stash-rich-text-7 stash-rich-text-8 stash-rich-text-9;
  }

  li[data-list] {
    counter-set: stash-rich-text-1 stash-rich-text-2 stash-rich-text-3
      stash-rich-text-4 stash-rich-text-5 stash-rich-text-6 stash-rich-text-7
      stash-rich-text-8 stash-rich-text-9;
    list-style: none;
  }

  li[data-list]::before {
    display: inline-block;
    margin-left: -1.5em;
    margin-right: 0.3em;
    text-align: right;
    white-space: nowrap;
    width: 1.2em;
  }

  li[data-list="bullet"]::before {
    content: "\2022";
  }

  li[data-list="ordered"] {
    counter-increment: stash-rich-text-0;
  }

  li[data-list="ordered"]::before {
    content: counter(stash-rich-text-0, decimal) ". ";
  }

  li[data-list="ordered"].ql-indent-1 {
    counter-increment: stash-rich-text-1;
  }

  li[data-list="ordered"].ql-indent-1::before {
    content: counter(stash-rich-text-1, lower-alpha) ". ";
  }

  li[data-list="ordered"].ql-indent-2 {
    counter-increment: stash-rich-text-2;
  }

  li[data-list="ordered"].ql-indent-2::before {
    content: counter(stash-rich-text-2, lower-roman) ". ";
  }

  li[data-list="ordered"].ql-indent-3 {
    counter-increment: stash-rich-text-3;
  }

  li[data-list="ordered"].ql-indent-3::before {
    content: counter(stash-rich-text-3, decimal) ". ";
  }

  li[data-list="ordered"].ql-indent-4 {
    counter-increment: stash-rich-text-4;
  }

  li[data-list="ordered"].ql-indent-4::before {
    content: counter(stash-rich-text-4, lower-alpha) ". ";
  }

  li[data-list="ordered"].ql-indent-5 {
    counter-increment: stash-rich-text-5;
  }

  li[data-list="ordered"].ql-indent-5::before {
    content: counter(stash-rich-text-5, lower-roman) ". ";
  }

  li[data-list="ordered"].ql-indent-6 {
    counter-increment: stash-rich-text-6;
  }

  li[data-list="ordered"].ql-indent-6::before {
    content: counter(stash-rich-text-6, decimal) ". ";
  }

  li[data-list="ordered"].ql-indent-7 {
    counter-increment: stash-rich-text-7;
  }

  li[data-list="ordered"].ql-indent-7::before {
    content: counter(stash-rich-text-7, lower-alpha) ". ";
  }

  li[data-list="ordered"].ql-indent-8 {
    counter-increment: stash-rich-text-8;
  }

  li[data-list="ordered"].ql-indent-8::before {
    content: counter(stash-rich-text-8, lower-roman) ". ";
  }

  li[data-list].ql-indent-1 {
    counter-set: stash-rich-text-2 stash-rich-text-3 stash-rich-text-4
      stash-rich-text-5 stash-rich-text-6 stash-rich-text-7 stash-rich-text-8
      stash-rich-text-9;
    padding-left: 3em;
  }

  li[data-list].ql-indent-2 {
    counter-set: stash-rich-text-3 stash-rich-text-4 stash-rich-text-5
      stash-rich-text-6 stash-rich-text-7 stash-rich-text-8 stash-rich-text-9;
    padding-left: 6em;
  }

  li[data-list].ql-indent-3 {
    counter-set: stash-rich-text-4 stash-rich-text-5 stash-rich-text-6
      stash-rich-text-7 stash-rich-text-8 stash-rich-text-9;
    padding-left: 9em;
  }

  li[data-list].ql-indent-4 {
    counter-set: stash-rich-text-5 stash-rich-text-6 stash-rich-text-7
      stash-rich-text-8 stash-rich-text-9;
    padding-left: 12em;
  }

  li[data-list].ql-indent-5 {
    counter-set: stash-rich-text-6 stash-rich-text-7 stash-rich-text-8
      stash-rich-text-9;
    padding-left: 15em;
  }

  li[data-list].ql-indent-6 {
    counter-set: stash-rich-text-7 stash-rich-text-8 stash-rich-text-9;
    padding-left: 18em;
  }

  li[data-list].ql-indent-7 {
    counter-set: stash-rich-text-8 stash-rich-text-9;
    padding-left: 21em;
  }

  li[data-list].ql-indent-8 {
    counter-set: stash-rich-text-9;
    padding-left: 24em;
  }

  ol li:not([data-list]) {
    list-style: decimal;
  }

  ul li:not([data-list]) {
    list-style: disc;
  }
}