.transaction {
  &__container { @extend %paper; }
  &__header { @extend %section-header; }
  &__heading { @extend %section-header__heading; }
  &__subheading { @extend %section-header__subheading; }
  &__tabs { @extend %section-tabs; }

  &__tab {
    @extend %section-tabs__tab;
    &--active { @extend %section-tabs__tab--active; }
  }

  &__attributes { padding: explorer-size(-1) explorer-size(1); }
  &__column { @include explorer-typography("body1"); }
  &__item { @extend %section-list__item; }
  &__item-key { @extend %section-list__item-key; }
  &__item-value { @extend %section-list__item-value; }
  &__link { color: explorer-color("blue", "500"); }
  &__status {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &__icon {
    height: explorer-size(0)/2;
    width: explorer-size(0)/2;
    border-radius: explorer-size(0)/2;
    margin-left: explorer-size(-2);

    &--pending { background-color: explorer-color("slate", "500"); }
    &--success { background-color: explorer-color("green", "500"); }
    &--failure { background-color: explorer-color("red", "500"); }
    &--out_of_gas { background-color: explorer-color("yellow", "500"); }
  }
}

@media (min-width: $explorer-breakpoint-lg) {
  &__icon { margin-left: explorer-size(-1); }
  .transaction {
    &__attributes {
      display: flex;
      align-items: top;
      justify-content: top;
    }

    &__column {
      width: explorer-size(1);
      flex: 1;
      margin-right: explorer-size(1);
      & + & { margin-left: explorer-size(1); }
    }
  }
}