@use "../../../settings/constants";

@mixin mykn-paginator-hide {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mykn-paginator {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "meta spacer options nav";
  justify-content: space-between;
  column-gap: var(--sizes-spacing-m-h);
  row-gap: var(--sizes-spacing-xs-v);
  position: relative;
  width: 100%;

  @media screen and (max-width: constants.$breakpoint-desktop - 1px) {
    column-gap: var(--sizes-spacing-xs-h);
    grid-template-columns: auto auto;
    grid-template-rows: repeat(2, auto);
    grid-template-areas:
      "meta options"
      "nav nav";

    &--loading .mykn-p,
    .mykn-paginator__button--page {
      @include mykn-paginator-hide;
    }
  }

  &__screenreader-only {
    @include mykn-paginator-hide;
  }

  &__section {
    display: flex;
    align-items: center;
    gap: var(--sizes-spacing-xs-h);
  }

  &__section--meta {
    grid-area: meta;
  }

  &__section--options {
    grid-area: options;
  }

  &__section--nav {
    grid-area: nav;
  }

  &__buttons {
    display: flex;
    align-items: center;
    gap: var(--sizes-spacing-xs-v);
  }
}