.transactions {
  @extend %paper;

  &__container {
    padding: explorer-size(-1) explorer-size(0);
    & + & { padding-top: 0; }
    &--title { padding-top: explorer-size(0); }
  }

  &__headline-title,
  &__title {
    @include explorer-typography("title");
    color: explorer-color("slate", "100");
    margin: 0;
  }

  &__headline-title { line-height: 18px; }

  &__table {
    @extend %table;
    @include explorer-typography("body1");
    color: explorer-color("slate", "100");
  }

  &__hash {
    width: explorer-size(2);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  &__column-header { @include explorer-typography("body1"); }
  &__link { color: explorer-color("blue", "500"); }

  &__pagination {
    margin: explorer-size(-1) 0 explorer-size(-2) 0;
    .pagination { text-align: right; }
  }

  &__hash {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}

@media (min-width: $explorer-breakpoint-sm) {
  .transactions {
    &__column-header {
      &--optional { display: table-cell; }
    }
    &__column {
      &--optional { display: table-cell; }
    }
  }
}

@media (min-width: $explorer-breakpoint-md) {
  .transactions {
    &__headline {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    &__headline-title { flex: 1; }
    &__pagination {
      margin: explorer-size(-1) 0 explorer-size(-2) 0;
    }
  }
}

@media (min-width: $explorer-breakpoint-lg) {
  .transactions {
    &__hash { width: explorer-size(3); }
  }
}

@media (min-width: $explorer-breakpoint-xl) {
  .transactions {
    &__hash { width: explorer-size(4); }
  }
}