почему активный item не двигается

      &.active {
        right: -80px;
      }

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

import IconArrowDown from '@/shared/assets/icons/Events/IconArrowDown.svg';
import IconLive from '@/shared/assets/icons/Events/IconLive.svg';
import IconMore from '@/shared/assets/icons/Events/IconMore.svg';
import IconRoute from '@/shared/assets/icons/Events/IconRoute.svg';
import MockQr from '@/shared/assets/images/mock-qr.svg?url';
import type { Events } from '@/shared/mocks/Events.ts';

defineProps<{
  event: Events;
  currentColor: string;
}>();

const contentRef = ref<HTMLElement | null>(null);
const showArrow = ref(false);

const isRouteBlock = ref(false);
const isMoreBlock = ref(false);
const isLiveBlock = ref(false);

const blocks = {
  isRouteBlock,
  isMoreBlock,
  isLiveBlock,
};

const toggleBlock = (blockName: keyof typeof blocks) => {
  const current = blocks[blockName].value;
  Object.keys(blocks).forEach((key) => {
    blocks[key as keyof typeof blocks].value = false;
  });
  if (!current) {
    blocks[blockName].value = true;
  }
};

const checkScroll = () => {
  if (contentRef.value) {
    const { scrollHeight, clientHeight, scrollTop } = contentRef.value;
    showArrow.value =
      scrollHeight > clientHeight &&
      scrollTop + clientHeight < scrollHeight - 1;
  }
};

const scrollContentDown = () => {
  if (contentRef.value) {
    contentRef.value.scrollBy({
      top: contentRef.value.clientHeight,
      behavior: 'smooth',
    });
  }
};

onMounted(() => {
  checkScroll();
  if (contentRef.value) {
    contentRef.value.addEventListener('scroll', checkScroll);
  }
});

onUnmounted(() => {
  if (contentRef.value) {
    contentRef.value.removeEventListener('scroll', checkScroll);
  }
});
</script>

<template>
  <div class="event-card">
    <div class="event-card__inner">
      <div class="event-card__photo">
        <img :src="event.image" alt="Event image" />
        <div
          v-if="event.time_start && event.time_end"
          class="event-card__time"
          :style="{ background: currentColor }"
        >
          {{ event.time_start }}-{{ event.time_end }}
        </div>
        <div class="event-card__actions">
          <div
            class="event-card__actions-item"
            :class="{ active: isRouteBlock }"
            @click="toggleBlock('isRouteBlock')"
          >
            <IconRoute />
          </div>
          <div
            class="event-card__actions-item"
            :class="{ active: isMoreBlock }"
            @click="toggleBlock('isMoreBlock')"
          >
            <IconMore />
          </div>
          <div
            class="event-card__actions-item"
            :class="{ active: isLiveBlock }"
            @click="toggleBlock('isLiveBlock')"
          >
            <IconLive />
          </div>
        </div>
      </div>
      <div class="event-card__content" ref="contentRef">
        <div class="event-card__content-inner">
          <div class="event-card__title">{{ event.title }}</div>
          <div
            v-if="!isRouteBlock && !isMoreBlock && !isLiveBlock"
            class="event-card__description"
          >
            {{ event.description }}
          </div>
          <div
            v-else-if="isRouteBlock"
            class="event-card__route-block extra-block"
          >
            <img
              :src="MockQr"
              alt=""
              style="filter: invert(100%)"
              class="event-card__qr"
            />
            <p>Забрать маршрут</p>
          </div>
          <div
            v-else-if="isMoreBlock"
            class="event-card__more-block extra-block"
          >
            <img
              :src="MockQr"
              alt=""
              style="filter: invert(100%)"
              class="event-card__qr"
            />
            <p>
              Больше информации <br />
              на официальном сайте
            </p>
          </div>
          <div
            v-else-if="isLiveBlock"
            class="event-card__live-block extra-block"
          >
            (⊙ˍ⊙)
          </div>
        </div>
      </div>
      <IconArrowDown
        class="event-card__arrow"
        @click="scrollContentDown"
        :class="{ hidden: !showArrow }"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
@use '@/shared/assets/styles/helpers' as *;

.event-card {
  height: 536px;
  width: 306px;
  background-color: var(--color-beige-light);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);

  &__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  &__photo {
    position: relative;
    max-height: 205px;
    margin-bottom: 16px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  .extra-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;

    img {
      width: 120px;
      height: 120px;
    }
  }

  &__actions {
    z-index: -1;
    position: absolute;
    top: 10px;
    right: -62px;
    display: flex;
    flex-direction: column;
    gap: 20px;

    &-item {
      max-height: 48px;
      padding: 3px 10px 3px 28px;
      background-color: var(--color-red);

      svg {
        color: var(--color-white);
      }

      &.active {
        right: -80px;
      }
    }
  }

  &__time {
    position: absolute;
    right: 0;
    bottom: 20px;
    padding: 8px 15px 8px 8px;
    color: var(--color-white);
    font-weight: 100;
    font-size: 14px;
    transition: background 0.3s ease;

    @include terminal-full {
      left: 0;
      right: unset;
    }
  }

  &__content {
    flex: 1;
    max-height: 301px;
    overflow-y: auto;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;

    @include terminal-full {
      max-height: 340px;
    }

    &::-webkit-scrollbar {
      display: none;
    }

    &-inner {
      padding-inline: 24px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
  }

  &__title {
    font-weight: 400;
    font-size: 22px;
    color: var(--color-black);
  }

  &__description {
    font-weight: 100;
    font-size: 14px;
    color: var(--color-black);
  }

  &__arrow {
    position: relative;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    cursor: pointer;
    transition: opacity 0.1s;

    &.hidden {
      opacity: 0;
    }
  }
}
</style>