@import "../_variables";
@import "../_mixins";

.page {
  padding-bottom: 2rem;
  display: block;

  .theme-content {
    @include content_wrapper;
    padding-top: 0;
  }
}

.page-meta {
  @include content_wrapper;
  padding-top: 1rem;
  padding-bottom: 1rem;
  overflow: auto;

  .meta-item {
    cursor: default;
    margin-top: 0.8rem;
    font-size: 1em;

    .meta-item-label {
      font-weight: 500;
      color: var(--c-text);
    }

    .meta-item-info {
      font-weight: 400;
      color: var(--c-text-sub);
    }
  }

  .edit-link {
    display: inline-flex;
    align-items: center;
    margin-right: 0.25rem;
    color: var(--c-text-accent);

    svg.ov-icon {
      width: 0.85em;
    }

    a {
      color: var(--c-text-accent) !important;
      margin-left: 3px;
      &:hover {
        text-decoration: underline;
      }
    }
  }

  .last-updated {
    float: right;
  }
}

@media (max-width: $MQMobile) {
  .page-meta {
    font-size: 0.9em;

    .last-updated {
      float: none;
    }
  }
}

.page-nav {
  @include content_wrapper;
  padding-top: 1rem;
  padding-bottom: 0;

  .inner {
    min-height: 2rem;
    margin-top: 0;
    border-top: 1px solid var(--c-border);
    transition: border-color var(--t-color);
    padding-top: 1rem;
    overflow: auto;
  }

  .prev {
    a:before {
      content: "←";
    }
  }

  .next {
    float: right;

    a:after {
      content: "→";
    }
  }
}