@import '../../../scss/styles.scss';

.versions {
  width: 100%;
  margin-bottom: base(2);

  &__wrap {
    padding-top: 0;
    padding-bottom: var(--spacing-view-bottom);
    margin-top: calc(var(--base) * 0.75);
  }

  &__header {
    margin-bottom: var(--base);
  }

  &__no-versions {
    margin-top: calc(var(--base) * 1.5);
  }

  &__parent-doc {
    .banner__content {
      display: flex;
    }
  }

  &__parent-doc-pills {
    [dir='ltr'] & {
      margin-left: auto;
    }

    [dir='rtl'] & {
      margin-right: auto;
    }
  }

  .table {
    table {
      width: 100%;
      overflow: auto;
    }
  }

  &__page-controls {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .paginator {
    margin-bottom: 0;
  }

  &__page-info {
    [dir='ltr'] & {
      margin-right: base(1);
      margin-left: auto;
    }

    [dir='rtl'] & {
      margin-left: base(1);
      margin-right: auto;
    }
  }

  @include mid-break {
    &__wrap {
      padding-top: 0;
      margin-top: 0;
    }

    // on mobile, extend the table all the way to the viewport edges
    // this is to visually indicate overflowing content
    .table {
      display: flex;
      width: calc(100% + calc(var(--gutter-h) * 2));
      max-width: unset;
      left: calc(var(--gutter-h) * -1);
      position: relative;
      padding-left: var(--gutter-h);

      &::after {
        content: '';
        height: 1px;
        padding-right: var(--gutter-h);
      }
    }

    &__page-controls {
      flex-wrap: wrap;
    }

    &__page-info {
      [dir='ltr'] & {
        margin-left: 0;
      }

      [dir='rtl'] & {
        margin-right: 0;
      }
    }

    .paginator {
      width: 100%;
      margin-bottom: $baseline;
    }
  }
}