@use '../../../styles/_globals.scss' as *;

:host {
  display: block;
  position: relative;
}

.inner-wrapper {
  position: relative;
}

// STRIKETHROUGH LINE (swipe-right gesture)
.strikethrough-line {
  position: absolute;
  left: 48px;
  height: 2px;
  width: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: calc(var(--z-swipe-block) + 1);
  background: var(--text-color-muted);

  :host-context(.isDarkTheme) & {
    height: 2px;
    background: var(--text-color-muted);
  }
  border-radius: 2px;
  pointer-events: none;
  opacity: 1;
}

// SWIPE BLOCK (swipe-left gesture)
.block-right {
  pointer-events: none;
  // Resting: brand-colored icon only, no fill (a "ghost" affordance).
  // --brand adapts per theme (darker in light, lighter in dark) so the icon
  // stays legible over the task-row background. See #7841.
  color: var(--brand);
  position: absolute;
  bottom: 2px;
  top: 1px;
  right: 0;
  width: 0;
  z-index: var(--z-swipe-block);
  transition: var(--transition-standard);
  border-radius: var(--task-border-radius);
  overflow: hidden;

  // Armed: the reveal fills with the brand primary (never the red-ish accent)
  // and the icon inverts + pops, so "release to open menu" is unmistakable
  // without implying a destructive action. See #7841.
  &.isActive {
    background-color: var(--c-primary);
    color: var(--c-contrast);

    mat-icon {
      transform: translate(-50%, -50%) scale(1.3);
    }
  }

  // Only the icon animates: the block's own transition is suppressed inline
  // during the pan, so the fill flips instantly without lagging the finger.
  // (--transition-standard already embeds `all`, so it can't be reused here.)
  mat-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform var(--transition-duration-m) var(--ani-standard-timing);

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }
}

.isPreventPointerEventsWhilePanning {
  user-select: none !important;
  pointer-events: none !important;
  transition: none !important;

  > * {
    pointer-events: none !important;
  }
}
