@use "../mixin";

.Header {
  grid-column: span 12;

  position: relative;

  height: 540px;

  .carousel-container {
    position: relative;

    height: 100%;

    border-radius: var(--md-sys-shape-corner-large);

    overflow: hidden;
    z-index: 0;

    .single {
      height: 100%;
      width: 100%;

      border-radius: var(--md-sys-shape-corner-large);
      border: 1px solid var(--md-sys-color-outline-variant);

      background-size: cover;

      z-index: 1;
    }

    .stage {
      display: flex;

      position: absolute;
      left: 0px;
      top: 0px;

      height: 100%;
      width: 100%;

      z-index: 1;

      .item {
        flex-shrink: 0;

        position: relative;

        height: 100%;

        background-size: cover;
        background-position: center;
        border-radius: var(--md-sys-shape-corner-medium);

        opacity: 0;
        overflow: hidden;
        transition: var(--anim-duration) var(--md-sys-motion-spring-slow-effect);

        &.current {
          width: 90%;

          margin-inline-end: 12px;

          border: 1px solid var(--md-sys-color-outline-variant);
          border-radius: var(--md-sys-shape-corner-large);

          opacity: 1;
          z-index: 10;
        }

        &.next {
          width: calc(10% - 12px);

          border: 1px solid var(--md-sys-color-outline-variant);
          border-radius: var(--md-sys-shape-corner-full);

          opacity: 1;
          z-index: 9;
        }

        &.previous {
          width: 0%;

          opacity: 0;
          z-index: 1;
        }

        &.standby {
          width: 0%;

          opacity: 0;
          z-index: 0;
        }
      }
    }

    .progress-ring {
      position: absolute;
      left: 8px;
      top: 8px;

      pointer-events: none;
      z-index: 2;

      svg {
        transform: rotate(-90deg);

        circle {
          transform-origin: center;
        }
      }
    }

    .controls {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;

      position: absolute;
      left: 0px;
      top: 0px;

      height: 100%;
      width: 100%;

      cursor: pointer;
      z-index: 3;

      .prev,
      .next {
        height: 100%;
        width: 50%;
      }
    }

    .indicators {
      display: flex;
      gap: 6px;

      position: absolute;
      bottom: 24px;
      left: 50%;

      transform: translateX(-50%);

      z-index: 4;

      .dot {
        height: 8px;
        width: 8px;

        padding: 0;

        border-radius: var(--md-sys-shape-corner-full);
        border: none;

        background-color: var(--md-sys-color-tertiary-container);

        cursor: pointer;
        transition: width var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);

        &:hover {
          width: 16px;
        }

        &.active {
          width: 16px;

          background-color: var(--md-sys-color-tertiary);
        }
      }
    }
  }
}

@media screen and (max-width: 1600px) {
  .Header {
    grid-column: span 12;
  }
}

@media screen and (max-width: 1200px) {
  .Header {
    grid-column: span 8;

    height: 45vh;
    min-height: 360px;
  }
}

@media screen and (max-width: 840px) {
  .Header {
    grid-column: span 6;

    .carousel-container .stage .item {
      &.current {
        width: 85%;
      }

      &.next {
        width: calc(15% - 12px);
      }
    }
  }
}

@media screen and (max-width: 600px) {
  .Header {
    grid-column: span 4;

    .carousel-container .stage .item {
      &.current {
        width: 100%;
      }

      &.next {
        width: 0%;
      }
    }
  }
}
