@use "../mixin";

.PageIndicator {
  position: relative;

  user-select: none;
  -moz-user-select: none;

  p {
    @include mixin.typescale-style("label-small");

    margin-inline-start: 18px;

    z-index: 1;
  }

  h3 {
    margin-inline-start: 18px;
    padding-block-end: 18px;

    font-variation-settings: "wght" 600;
    z-index: 1;
  }

  .indicator {
    position: absolute;

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

    pointer-events: none;
    transition: var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
    z-index: 1;
  }

  .indicator-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    z-index: 0;

    span {
      position: relative;

      width: 100%;

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

      &::after {
        content: "";

        display: block;

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

        height: 100%;

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

        background-color: transparent;

        transition: width var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial),
          heigh var(--md-sys-motion-spring-default-spatial-duration) var(--md-sys-motion-spring-default-spatial),
          background-color var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
        z-index: -1;
      }

      a {
        @include mixin.typescale-style("label-large");

        width: 100%;

        padding-block: 9px;
        padding-inline: 18px;

        color: var(--md-sys-color-on-surface);
        font-variation-settings: "wght" 200;
        text-decoration: none;

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

        &:focus-visible {
          background-color: var(--md-sys-color-surface-container);
        }
      }

      &.active {
        & > a {
          color: var(--md-sys-color-primary);
          font-variation-settings: "wght" 700;

          &:focus-visible {
            color: var(--md-sys-color-on-primary);

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

        &:hover {
          background-color: var(--md-sys-color-surface-container);
        }
      }

      &:not(.active) {
        &::after {
          width: 50%;
        }

        &:hover::after {
          width: 100%;

          background-color: var(--md-sys-color-surface-container);
        }
      }
    }
  }
}

@media screen and (max-width: 840px) {
  .PageIndicator {
    display: none;
  }
}
