[data-component="marquee"], .marquee-component {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  position: relative;
  width: 100%;

  &[data-marquee-orientation="vertical"] {
    justify-content: flex-start;
  }

  &[data-marquee-pause-on-hover="true"]:hover [data-marquee="group"] {
    animation-play-state: paused;
  }

  &[data-marquee-reverse="false"] [data-marquee="group"] {
    animation: marqueeScrollLeft var(--marquee-duration) linear infinite;
  }

  &[data-marquee-reverse="true"] [data-marquee="group"] {
    animation: marqueeScrollRight var(--marquee-duration) linear infinite;
  }

  &[data-marquee-orientation="vertical"][data-marquee-reverse="false"] [data-marquee="group"] {
    animation: marqueeScrollDown var(--marquee-duration) linear infinite;
  }

  &[data-marquee-orientation="vertical"][data-marquee-reverse="true"] [data-marquee="group"] {
    animation: marqueeScrollUp var(--marquee-duration) linear infinite;
  }

  &:not([data-marquee-orientation="vertical"])[data-marquee-fade-edges="true"] {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  }

  &[data-marquee-orientation="vertical"][data-marquee-fade-edges="true"] {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  }

  [data-marquee="content"], .marquee-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: calc(0 - var(--marquee-gap));
    margin-right: calc(0 - var(--marquee-gap));
  }

  &[data-marquee-orientation="vertical"] [data-marquee="content"] {
    margin-left: 0;
    margin-right: 0;
    margin-top: calc(0 - var(--marquee-gap));
    margin-bottom: calc(0 - var(--marquee-gap));
    flex-direction: column;
  }

  [data-marquee="group"], .marquee-group {
    display: flex;
    gap: var(--marquee-gap);
    padding-left: calc(var(--marquee-gap) / 2);
    padding-right: calc(var(--marquee-gap) / 2);
  }

  &[data-marquee-orientation="vertical"] [data-marquee="group"] {
    padding-left: 0;
    padding-right: 0;
    padding-top: calc(var(--marquee-gap) / 2);
    padding-bottom: calc(var(--marquee-gap) / 2);
    flex-direction: column;
  }
}

@keyframes marqueeScrollLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes marqueeScrollRight {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes marqueeScrollUp {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}

@keyframes marqueeScrollDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}