/**
 * Copyright IBM Corp. 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
@use '@carbon/react/scss/type' as *;
@use '@carbon/react/scss/spacing' as *;
@use '@carbon/react/scss/colors' as *;
@use '@carbon/react/scss/theme' as *;
@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/utilities/convert' as convert;

$prefix: 'clabs--whats-new' !default;
$animateTime: 0.25s;

.#{$prefix}__view-stack {
  min-block-size: convert.to-rem(256px);
  min-inline-size: convert.to-rem(256px);
}

.#{$prefix}__view-stack ul {
  position: relative;
  overflow: hidden;
  min-block-size: 100%;
  min-inline-size: 100%;
}

.#{$prefix}__view {
  position: absolute;
  z-index: 80;
  overflow: hidden auto;
  block-size: 100%;
  inline-size: 100%;
  inset-inline-start: 100%;
  transform: translateX(0);
  transition: transform $animateTime cubic-bezier(0.2, 0, 0.38, 0.9);
}

.#{$prefix}__view-active {
  z-index: 100;
  transform: translateX(-100%);
}

.#{$prefix}__view-in-stack {
  z-index: 90;
  transform: translateX(-200%);
}

@keyframes out-to-active {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes active-to-out {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

.#{$prefix}__view-recycle-in {
  z-index: 100;
  animation: out-to-active $animateTime cubic-bezier(0.2, 0, 0.38, 0.9) forwards;
}

.#{$prefix}__view-recycle-out {
  z-index: 90;
  animation: active-to-out $animateTime cubic-bezier(0.2, 0, 0.38, 0.9) forwards;
}

.#{$prefix}__view-stack-announcer {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  margin: convert.to-rem(-1px);
  block-size: convert.to-rem(1px);
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  inline-size: convert.to-rem(1px);
  white-space: nowrap;
}