@use "../mixin";

.PrevNext {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr;

  margin-block-start: 24px;

  a {
    display: flex;
    flex-direction: column;
    gap: 9px;

    position: relative;

    width: 100%;

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

    text-decoration: none !important;

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

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

    overflow: hidden;
    transition: border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
    user-select: none;
    -moz-user-select: none;

    &:active {
      border-radius: var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large)
        var(--md-sys-shape-corner-large);
    }

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

      display: flex;
      align-items: center;

      color: var(--md-sys-color-on-surface-variant);

      &::before {
        @include mixin.material-symbols($size: 18);
      }
    }

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

      color: var(--md-sys-color-on-surface);
      font-variation-settings: "wght" 600;
    }

    &.prev {
      grid-column: 1 / 2;

      text-align: start;

      .label {
        flex-direction: row;

        &::before {
          content: "arrow_back";
        }
      }
    }

    &.next {
      grid-column: 2 / 3;

      text-align: end;

      .label {
        flex-direction: row-reverse;

        &::before {
          content: "arrow_forward";
        }
      }
    }
  }

  &:has(a.next):has(a.prev) {
    a {
      &.prev {
        border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-medium)
          var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-extra-large);
      }

      &.next {
        border-radius: var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-extra-large)
          var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-medium);
      }

      &:active {
        &.prev {
          border-radius: var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium)
            var(--md-sys-shape-corner-large);
        }

        &.next {
          border-radius: var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large)
            var(--md-sys-shape-corner-medium);
        }
      }
    }
  }
}

@media screen and (max-width: 600px) {
  .PrevNext {
    grid-template-columns: 1fr;

    a {
      &.prev,
      &.next {
        grid-column: auto;
      }
    }

    &:has(a.next):has(a.prev) {
      a {
        &.prev {
          border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large)
            var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium);
        }

        &.next {
          border-radius: var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium)
            var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large);
        }

        &:active {
          &.prev {
            border-radius: var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large)
              var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium);
          }

          &.next {
            border-radius: var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium)
              var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large);
          }
        }
      }
    }
  }
}
