@layer base, demo;

/* ========================= */
/*   CARRUSEL KREA CSS ONLY  */
/* ========================= */

@layer demo {

.krea-carousel{
  /* VARIABLES DINÁMICAS DESDE EL PANEL */
  width: var(--krea-carousel-width);
  padding: var(--krea-carousel-padding);
  margin: var(--krea-carousel-margin);

  background: var(--krea-bg-color);

  /* Botones prev/next */
  --nav-btn-size: 48px;
  --nav-btn-bg: var(--krea-nav-color);
  --nav-btn-txt: #fff;

  /* Markers */
  --nav-marker-bg: var(--krea-markers-color);

  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 260px;
  gap: 0;

  anchor-name: --carousel;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }

  &::before,
  &::after{
    content: '';
  }

  /* ========================= */
  /*   MARKERS GROUP           */
  /* ========================= */

  @container style(--krea-show-markers: 1) {
    scroll-marker-group: after;

    &::scroll-marker-group{
      position: absolute;
      position-anchor: --carousel;
      inline-size: min(90cqi, 400px);
      display: flex;
      align-items: center;
      justify-content: center;
      justify-self: center;
      gap: .35rem;
      padding-block-start: 1rem;
      top: anchor(bottom);
      left: calc(anchor(left) - 10%);
      right: calc(anchor(right) - 10%);
    }
  }

  /* ========================= */
  /*   ITEM (PRODUCTO)         */
  /* ========================= */
  > .krea-item{
    position: relative;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    container-type: scroll-state;

    display: grid;
    grid-template-areas: 'img' 'title' 'price' 'button';
    text-align: center;

    padding: var(--krea-card-padding);
    margin: var(--krea-card-margin);
    background: var(--krea-card-bg);
    border-radius: var(--krea-card-radius);
    box-shadow: var(--krea-card-shadow);

    /* ========================= */
    /*   TÍTULO                  */
    /* ========================= */
    > h2{
      grid-area: title;
      margin: 1rem 0 0 0;
      font-size: 1.2rem;
      white-space: nowrap;
      color: var(--krea-text-color);
      transition: all 300ms ease-in-out;

      @container not scroll-state(snapped: inline) {
        scale: var(--krea-scale-side);
        opacity: .5;
        translate: 0 -100px;
      }

      @container scroll-state(snapped: inline) {
        scale: var(--krea-scale-center);
      }
    }

    /* ========================= */
    /*   PRECIO                  */
    /* ========================= */
    > .krea-price{
      grid-area: price;
      margin: 0;
      white-space: nowrap;
      color: var(--krea-price-color);
      font-weight: bold;
      transition: all 300ms ease-in-out;

      @container not scroll-state(snapped: inline) {
        scale: var(--krea-scale-side);
        opacity: 0;
      }

      @container scroll-state(snapped: inline) {
        scale: var(--krea-scale-center);
      }
    }

    /* ========================= */
    /*   IMAGEN                  */
    /* ========================= */
    > .img{
      grid-area: img;
      width: 100%;
      aspect-ratio: 3/4;
      transition: all 300ms ease-in-out;
      transform-origin: center center;

      @container not scroll-state(snapped: inline) {
        scale: var(--krea-scale-side);
        opacity: .5;
      }

      @container scroll-state(snapped: inline) {
        scale: var(--krea-scale-center);
      }

      > img{
        width: 100%;
        height: 100%;
        object-fit: cover;

        border-radius: var(--krea-card-radius);
        border: 3px solid rgba(255,255,255,0.6);
        box-shadow:
          0 10px 25px rgba(0,0,0,0.25),
          0 0 0 4px rgba(255,255,255,0.15) inset;
      }
    }

    /* ========================= */
    /*   BOTÓN AÑADIR AL CARRITO */
    /* ========================= */
    .krea-add-to-cart .button{
      grid-area: button;
      margin-top: 1rem;
      padding: 10px 18px;
      border-radius: 8px;
      background: var(--krea-button-bg);
      color: var(--krea-button-text);
      border: 2px solid var(--krea-button-border);
      transition: all 200ms ease-in-out;
      display: inline-block;
    }

    .krea-add-to-cart .button:hover{
      background: var(--krea-button-bg-hover);
      color: var(--krea-button-text-hover);
      border-color: var(--krea-button-border-hover);
    }

    /* ========================= */
    /*   MARKERS                 */
    /* ========================= */
    &::scroll-marker{
      content: ' ';
      height: 18px;
      aspect-ratio: 1;
      background-color: var(--nav-marker-bg);
      border-radius: 50%;
      transition: 150ms ease-in-out;
      scale: .65;
      opacity: .25;
    }

    &::scroll-marker:target-current{
      opacity: 1;
      scale: 1;
    }

    &::scroll-marker:where(:hover,:focus-visible){
      opacity: 1;
    }

    &::scroll-marker:focus-visible{
      outline: 1px dashed var(--nav-marker-bg);
      outline-offset: 4px;
    }
  }

  /* ========================= */
  /*   BOTONES PREV/NEXT       */
  /* ========================= */

  @container style(--krea-show-nav: 1) {
    &::scroll-button(*){
      position: absolute;
      position-anchor: --carousel;
      width: var(--nav-btn-size);
      aspect-ratio: 1/1;
      font: inherit;
      background-color: var(--nav-btn-bg);
      display: grid;
      place-content: center;
      color: #FFF;
      border:none;
      border-radius: 50%;
      opacity: 0.7;
      cursor: pointer;
      transition: all 150ms ease-in-out;
      outline: 1px dashed transparent;
      outline-offset: 0px;
      font-size: 1.4rem;
    }

    &::scroll-button(inline-start){
      content: '❮';
      left: calc(anchor(left) - var(--nav-btn-size));
    }

    &::scroll-button(inline-end){
      content: '❯';
      right: calc(anchor(right) - var(--nav-btn-size));
    }

    &::scroll-button(*):not(:disabled):where(:hover,:focus-visible){
      opacity: 1;
      scale: 1.15;
    }

    &::scroll-button(*):focus-visible{
      outline: 1px dashed var(--nav-btn-bg);
      outline-offset: 4px;
    }

    &::scroll-button(*):disabled{
      opacity: .25;
      cursor: unset;
    }
  }
}

}

/* ========================= */
/*   BASE                    */
/* ========================= */

@layer base {
  * { box-sizing: border-box; }
}