.pinned-message-border {
  position: relative;

  overflow: hidden;

  width: 0.125rem;
  min-width: 0.125rem;
  height: 2.25rem;
  margin: 0.125rem 0;
}

.pinned-message-border-wrapper-1 {
  width: 0.125rem;
  height: 2.25rem;
  border-radius: 0.0625rem;
  background: var(--color-primary);
}

.pinned-message-border-wrapper {
  will-change: transform;
  position: relative;
  background-color: var(--color-primary-opacity-hover);
  transition: transform 0.25s ease-in-out;
}

.pinned-message-border-mark {
  will-change: transform;

  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(var(--translate-y));

  width: 0.125rem;
  height: var(--height);
  border-radius: 0.0625rem;

  background: var(--color-primary);

  transition: transform 0.25s ease-in-out;
}