/* Shared Arab Wuwa action language: semantic 5x5 dot shapes morph on intent. */
.aw-dot-action {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px !important;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 hsl(var(--foreground) / 0.08),
    0 8px 20px hsl(var(--background) / 0.2);
  transform: translateZ(0);
  transform-style: preserve-3d;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color var(--dur-fast, 160ms) var(--ease, ease),
    background-color var(--dur-fast, 160ms) var(--ease, ease),
    color var(--dur-fast, 160ms) var(--ease, ease),
    box-shadow 0.42s var(--aw-button-smooth-ease, var(--ease, ease)),
    transform 0.42s var(--aw-button-elastic-ease, var(--ease, ease));
}

.aw-dot-action:not(:disabled):active {
  transform: translateY(0) scaleX(0.97) scaleY(0.96);
}

.aw-dot-action > .aw-dot-button__icon {
  display: grid;
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  place-content: center;
  direction: ltr;
}

.aw-dot-button__shape {
  display: grid;
  grid-area: 1 / 1;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 0.0625rem;
  width: 1.05rem;
  height: 1.05rem;
}

.aw-dot-button__dot {
  display: block;
  place-self: center;
  width: 0.125rem;
  height: 0.125rem;
  border-radius: 0.0625rem;
  background: currentColor;
  scale: 1;
  transition: scale 0.4s var(--aw-button-smooth-ease, var(--ease, ease));
  transition-delay: calc(var(--aw-dot-order) * 24ms);
}

.aw-dot-button__shape--active .aw-dot-button__dot {
  scale: 0;
  transition-delay: 0s;
}

.aw-dot-button__label {
  display: grid;
  min-width: 0;
  white-space: nowrap;
}

.aw-dot-button__label::before,
.aw-dot-button__label-text {
  grid-area: 1 / 1;
  transition: scale 0.42s var(--aw-button-smooth-ease, var(--ease, ease));
}

.aw-dot-button__label::before {
  content: attr(data-aw-dot-label);
  pointer-events: none;
  scale: 1 0;
  transform-origin: bottom;
}

.aw-dot-button__label-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  scale: 1;
  transform-origin: top;
}

.aw-dot-action--icon-only {
  width: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  gap: 0;
}

/* Rotation move rows reserve 54px controls; keep their established grid geometry. */
.aw-rot-move-editor-row .aw-dot-action--icon-only {
  width: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
}

.aw-dot-button__icon[data-aw-dot-icon-name="arrow-up"] {
  translate: 0 -0.025rem;
}

.aw-dot-button__icon[data-aw-dot-icon-name="arrow-down"] {
  translate: 0 0.025rem;
}

[dir="rtl"] .aw-dot-action {
  letter-spacing: 0;
}

[dir="rtl"] .aw-dot-button__icon[data-aw-dot-icon-name="arrow-left"] {
  scale: -1 1;
}

/* The dot glyph replaces Team DPS's legacy text-symbol pseudo icons. */
.tdps-action.aw-dot-action::before,
.tdps-favorite.aw-dot-action::before {
  content: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .aw-dot-action:not(:disabled):is(:hover, :focus-visible) {
    box-shadow:
      inset 0 1px 0 hsl(var(--foreground) / 0.12),
      0 13px 28px hsl(var(--background) / 0.28);
    transform: translateY(-2px);
  }

  .aw-dot-action:not(:disabled):is(:hover, :focus-visible) .aw-dot-button__shape:not(.aw-dot-button__shape--active) .aw-dot-button__dot {
    scale: 0;
    transition-delay: calc((var(--aw-dot-order) * 24ms) + (var(--aw-dot-parent) * 60ms));
  }

  .aw-dot-action:not(:disabled):is(:hover, :focus-visible) .aw-dot-button__shape--active .aw-dot-button__dot {
    scale: 1;
    transition-delay: calc((var(--aw-dot-order) * 24ms) + (var(--aw-dot-parent) * 60ms));
  }

  .aw-dot-action:not(:disabled):is(:hover, :focus-visible) .aw-dot-button__label-text {
    scale: 1 0;
  }

  .aw-dot-action:not(:disabled):is(:hover, :focus-visible) .aw-dot-button__label::before {
    scale: 1;
  }
}

@media (hover: none), (pointer: coarse) {
  .aw-dot-action:not(:disabled):active .aw-dot-button__shape:not(.aw-dot-button__shape--active) .aw-dot-button__dot,
  .aw-dot-action:not(:disabled):active .aw-dot-button__label-text {
    scale: 0;
  }

  .aw-dot-action:not(:disabled):active .aw-dot-button__shape--active .aw-dot-button__dot,
  .aw-dot-action:not(:disabled):active .aw-dot-button__label::before {
    scale: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aw-dot-action,
  .aw-dot-button__dot,
  .aw-dot-button__label::before,
  .aw-dot-button__label-text {
    transition: none !important;
  }

  .aw-dot-action:not(:disabled):is(:hover, :focus-visible, :active) {
    transform: none;
  }

  .aw-dot-action .aw-dot-button__shape:not(.aw-dot-button__shape--active) .aw-dot-button__dot,
  .aw-dot-action:not(:disabled):is(:hover, :focus-visible, :active) .aw-dot-button__shape:not(.aw-dot-button__shape--active) .aw-dot-button__dot,
  .aw-dot-action .aw-dot-button__label-text,
  .aw-dot-action:not(:disabled):is(:hover, :focus-visible, :active) .aw-dot-button__label-text {
    scale: 1;
  }

  .aw-dot-action .aw-dot-button__shape--active .aw-dot-button__dot,
  .aw-dot-action:not(:disabled):is(:hover, :focus-visible, :active) .aw-dot-button__shape--active .aw-dot-button__dot,
  .aw-dot-action .aw-dot-button__label::before,
  .aw-dot-action:not(:disabled):is(:hover, :focus-visible, :active) .aw-dot-button__label::before {
    scale: 0;
  }
}

@media (forced-colors: active) {
  .aw-dot-button__dot {
    background: ButtonText;
  }

  .aw-dot-action:is(:hover, :focus-visible) .aw-dot-button__dot {
    background: HighlightText;
  }
}