.timeIndicatorWrapper {
  padding: 4px;
}

.timeIndicatorTrack {
  background: var(--color-border-default);
  border-radius: var(--radii-rounded);
  overflow: hidden;
  height: 2px;
}

.timeIndicator {
  background: var(--color-border-accent);
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(var(--progress, 0));
  transition: var(--transition-fast);
  transition-property: background;
}

.wrapper {
  top: 0;
  right: 0;

  --drag-translate-x: 0px;
  --translate-x: var(--drag-translate-x);

  background: var(--color-background-static-default);
  @extend .pos-3dp;
  position: absolute;
  overflow: hidden;
  border-radius: var(--radii-medium);
  width: 360px;
  padding: 4px;
  transform: translateX(var(--translate-x));
  transition:
    cubic-bezier(0, 0.405, 0, 1.2) var(--motion-timing-slow) transform,
    var(--transition-slow) opacity;
  cursor: grab;

  &.isDragging {
    cursor: grabbing;
    transition: none;
  }

  &:hover,
  &.isDragging {
    .timeIndicator {
      background: var(--color-border-strong);
    }
  }
}

.offsetWrapper {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  transform: translateY(var(--offset-y));
  transition: var(--transition-slow);
  transition-property: transform;
  position: relative;

  @media (prefers-reduced-motion: reduce) {
    transition-duration: 0.1ms;
  }

  &.enter .wrapper {
    --translate-x: calc(100% + var(--snackbar-offset));
    transition: none;
  }

  &.enterActive .wrapper {
    --translate-x: var(--drag-translate-x);
    transition: transform var(--transition-slow);
  }

  &.exit {
    z-index: -1;

    .wrapper {
      --translate-x: var(--drag-translate-x);
      pointer-events: none;
      transition: none;
    }
  }

  &.exitActive .wrapper {
    --translate-x: calc(100% + var(--snackbar-offset));
    transition: transform var(--transition-slow);
  }

  @media (prefers-reduced-motion: reduce) {
    &.exitActive .wrapper,
    &.enterActive .wrapper {
      transition-duration: 0.1ms;
    }
  }
}

.content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  flex: 1;
}

.actions {
  padding: 8px;
  padding-top: 0;
  grid-column: -1 / 1;
  display: flex;
  gap: 8px;
}

.title {
  color: var(--color-content-strong);
  user-select: none;
  @include typography(heading, 300, default);
}

.textContent {
  color: var(--color-content-default);
  user-select: none;
  @include typography(text, 300, regular);
}

.mainWrapper {
  background: transparent;
}

.textContentWrapper {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0px 8px;
}

.buttonWrapper {
  padding: 12px;
}

.snackbarsWrapper {
  --snackbar-offset: 16px;

  z-index: var(--z-index-snackbar);
  position: fixed;
  top: var(--snackbar-offset);
  right: var(--snackbar-offset);
}

.draggingOverlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-snackbar);
}

.image {
  user-select: none;
  object-fit: cover;
  pointer-events: none;
  width: 360px;
  height: 200px;
  margin: -4px;
  margin-bottom: 0;
}
