/* 
  This file contains the styles for the carrousel component.
  The carrousel component is a container that holds a list of items.
  The items are displayed in a row and the carrousel component
  allows the user to navigate through the items or goes automatically.
*/

bubble-carrousel-component {
  --height: 25rem;

  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--height);
  width: 100%;
  margin-left: 0;
  /* stylelint-disable-next-line */
  overflow-x: hidden;
}

card-carrousel-component {
  --height: 20rem;

  max-width: 100%;
  display: flex;
  justify-content: start;
  /* Overflow can be used safely in this case */
  /* stylelint-disable-next-line */
  overflow-y: hidden;
  /* stylelint-disable-next-line */
  overflow-x: hidden;
  height: calc(var(--height) - 4rem);
  margin-left: 0;
  padding: 0 var(--margin);
}

carrousel-item-component {
  /* Will be displayed via JS */
  display: none;
  width: auto;
  color: white;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition:
    scale var(--animation-time) ease,
    opacity var(--animation-time) ease;
  position: relative;
  cursor: pointer;
  text-align: center;
  flex: 0 0 auto;
}

bubble-carrousel-component carrousel-item-component {
  height: calc(var(--height) - 2rem);
  width: calc(var(--height) - 2rem);
  color: white;
  opacity: 0;
  display: none;
  background: url('/assets/main/images/shapes/bubble.webp') no-repeat center
    center;
  background-size: auto 100%;
  padding: 3rem;
}

card-carrousel-component carrousel-item-component {
  /* Overflow can be used safely in this case */
  /* stylelint-disable-next-line */
  overflow-x: hidden;
  width: calc(var(--height) - 4rem);
  height: calc(var(--height) - 4rem);
  margin: 0 var(--small-margin);
  padding: var(--small-margin);
  background-color: var(--orange);
  border-radius: var(--border-radius);
  display: flex;
  position: relative; /* For the image */
}

carrousel-item-component.left {
  animation: move-to-left var(--long-animation-time) ease;
  order: 0;
}

carrousel-item-component.left,
carrousel-item-component.right {
  display: flex;
  opacity: 0.25;
  z-index: 0;
  scale: 0.75;
}

carrousel-item-component.center {
  animation: move-to-center var(--long-animation-time) ease;
  margin: 0 var(--small-margin);
  z-index: 1;
  opacity: 1;
  display: flex;
  order: 1;
}

carrousel-item-component.faded {
  opacity: 0.5;
}

carrousel-item-component.right {
  animation: pop-up var(--long-animation-time) ease;
  order: 2;
}

carrousel-item-component p {
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
  z-index: 2;
}

carrousel-item-component img {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}

carrousel-item-component a {
  text-decoration: none;
  z-index: 2;
  margin-top: var(--small-margin);
  border-radius: var(--border-radius);
  text-transform: uppercase;
}

@keyframes move-to-left {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes move-to-center {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes pop-up {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

/* Phone */
@media (max-width: 650px) {
  bubble-carrousel-component {
    --height: 15rem;
  }

  carrousel-item-component p {
    font-size: 1.25rem;
  }
}