/* Slot defaultable styles */
.slot-defaultable { display: contents; }
.slot-defaultable .slot:empty { display: none; }
.slot-defaultable .slot { display: contents; }
.slot-defaultable .default-slot { display: none; }
.slot-defaultable .slot:empty + .default-slot { display: contents; }

.wv-unroll {
  --wv-unroll-gap: var(--wv-margin-default, 24rpx);
  --wv-unroll-item-gap: var(--wv-margin-mini, 6rpx);
  --wv-animation-duration: 300ms;
  
  display: inline-block;
  position: relative;
  flex-wrap: nowrap;
  z-index: 2;
}

/* Handler styling */
.wv-unroll-handler {
  position: relative;
  z-index: 3;
}

.wv-unroll .wv-unroll-items-position {
  position: absolute;
}

.wv-unroll-handler .handler-item {
  transition: transform var(--wv-animation-duration) ease-out, 
              opacity var(--wv-animation-duration) ease-out;
}

.wv-unroll .handler-item.active {
  animation: unroll-rotate-active var(--wv-animation-duration) ease-out forwards;
}
.wv-unroll .handler-item.inactive {
  animation: unroll-rotate-inactive var(--wv-animation-duration) ease-out forwards;
}

@keyframes unroll-rotate-active {
  0% {
    transform: rotate(0deg);
  }
  99% {
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes unroll-rotate-inactive {
  0% {
    transform: rotate(0deg);
  }
  99% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}



.wv-unroll.direction-to-right .wv-unroll-items-position {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: var(--wv-unroll-gap);
}
.wv-unroll.direction-to-left .wv-unroll-items-position {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: var(--wv-unroll-gap);
}

.wv-unroll.direction-to-bottom .wv-unroll-items-position {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--wv-unroll-gap);
}
.wv-unroll.direction-to-top .wv-unroll-items-position {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--wv-unroll-gap);
}


.wv-unroll-items-wrap {
  display: flex;
  max-width: 100%;
}

.wv-unroll.direction-to-right .wv-unroll-items-wrap {
  flex-direction: row;
}
.wv-unroll.direction-to-left .wv-unroll-items-wrap {
  flex-direction: row-reverse;
}

.wv-unroll.direction-to-bottom .wv-unroll-items-wrap {
  flex-direction: column;
}
.wv-unroll.direction-to-top .wv-unroll-items-wrap {
  flex-direction: column-reverse;
}

/* Items container */
.wv-unroll-items {
  display: flex;
  align-items: center;
  gap: var(--wv-unroll-item-gap);
  position: relative;
  transition: all var(--wv-animation-duration) ease-out;
  flex-wrap: nowrap;
  width: auto;
  height: auto;
  overflow: hidden;
  transform-origin: left top;
  flex-shrink: 0;
}

/* Direction-specific item layouts */
.wv-unroll.direction-to-right .wv-unroll-items {
  transform-origin: left center;
  flex-direction: row;
}
.wv-unroll.direction-to-left .wv-unroll-items {
  transform-origin: right center;
  flex-direction: row-reverse;
}

.wv-unroll.direction-to-bottom .wv-unroll-items {
  transform-origin: top center;
  flex-direction: column;
}
.wv-unroll.direction-to-top .wv-unroll-items {
  transform-origin: bottom center;
  flex-direction: column-reverse;
}

/* Expansion/Collapse states */
/* Horizontal directions */
.wv-unroll.direction-to-right .wv-unroll-items.collapsed,
.wv-unroll.direction-to-left .wv-unroll-items.collapsed {
  transform: scale(0);
  opacity: 0;
}

.wv-unroll.direction-to-right .wv-unroll-items.expanded,
.wv-unroll.direction-to-left .wv-unroll-items.expanded {
  transform: scale(1);
  opacity: 1;
}

/* Vertical directions */
.wv-unroll.direction-to-bottom .wv-unroll-items.collapsed,
.wv-unroll.direction-to-top .wv-unroll-items.collapsed {
  transform: scale(0);
  opacity: 0;
}

.wv-unroll.direction-to-bottom .wv-unroll-items.expanded,
.wv-unroll.direction-to-top .wv-unroll-items.expanded {
  transform: scale(1);
  opacity: 1;
}