@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-marquee {
  display: flex;
  position: relative;
  overflow: hidden;
  width: 100%;
  --yh-marquee-gap: 0px;
  --yh-marquee-duration: 20s;
  --yh-marquee-iteration-count: infinite;
  --yh-marquee-direction: normal;
  --yh-marquee-play-state: running;
  --yh-marquee-gradient-color: var(--yh-bg-color);
  --yh-marquee-gradient-width: 40px;
}
.yh-marquee--horizontal {
  flex-direction: row;
}
.yh-marquee--horizontal .yh-marquee__content {
  flex-direction: row;
  min-width: 100%;
  animation: marquee-horizontal var(--yh-marquee-duration) linear var(--yh-marquee-iteration-count);
  animation-direction: var(--yh-marquee-direction);
  animation-play-state: var(--yh-marquee-play-state);
}
.yh-marquee--horizontal .yh-marquee__item {
  flex-direction: row;
  gap: var(--yh-marquee-gap);
  margin-right: var(--yh-marquee-gap);
}

.yh-marquee--vertical {
  flex-direction: column;
  height: 100%;
  min-height: 100px;
}
.yh-marquee--vertical .yh-marquee__content {
  flex-direction: column;
  height: max-content;
  min-height: 100%;
  animation: marquee-vertical var(--yh-marquee-duration) linear var(--yh-marquee-iteration-count);
  animation-direction: var(--yh-marquee-direction);
  animation-play-state: var(--yh-marquee-play-state);
}
.yh-marquee--vertical .yh-marquee__item {
  flex-direction: column;
  gap: var(--yh-marquee-gap);
  margin-bottom: var(--yh-marquee-gap);
}

.yh-marquee__content {
  display: flex;
  flex-shrink: 0;
}

.yh-marquee__item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.yh-marquee--pause-on-hover:hover .yh-marquee__content {
  animation-play-state: paused !important;
}

.yh-marquee--pause-on-click:active .yh-marquee__content {
  animation-play-state: paused !important;
}

.yh-marquee__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}
.yh-marquee--horizontal .yh-marquee__overlay {
  background: linear-gradient(to right, var(--yh-marquee-gradient-color) 0%, transparent var(--yh-marquee-gradient-width), transparent calc(100% - var(--yh-marquee-gradient-width)), var(--yh-marquee-gradient-color) 100%);
}
.yh-marquee--vertical .yh-marquee__overlay {
  background: linear-gradient(to bottom, var(--yh-marquee-gradient-color) 0%, transparent var(--yh-marquee-gradient-width), transparent calc(100% - var(--yh-marquee-gradient-width)), var(--yh-marquee-gradient-color) 100%);
}

@keyframes marquee-horizontal {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% / (var(--yh-marquee-clone-count) + 1)));
  }
}
@keyframes marquee-vertical {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(-100% / (var(--yh-marquee-clone-count) + 1)));
  }
}