/**
 * 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%));
}

