@import "../../styles/variables.scss";

.transactionCard {
  border-radius: 0;
  margin-bottom: $base-spacing;

  @media only screen and (min-width: 48em) {
    border-radius: $base-border-radius;
  }

  @media only screen and (min-width: 65em) {
    margin-bottom: $m-spacing;
  }

  &:hover {
    .titleText {
      color: $brand-blue;
    }
  }
}

.link {
  color: inherit;
}

.link:hover {
  color: $brand-blue;
  text-decoration: underline;
}

.titleText {
  padding-bottom: $m-spacing;
  width: 100%;
  line-height: 1.4;
  display: inline-block;

  @media only screen and (min-width: 48em) {
    padding-bottom: $m-spacing;
  }

  &:hover {
    text-decoration: underline;
  }
}

.data {
  margin-top: $base-spacing;
  word-wrap: break-word;
}

.transactionPrimaryData {
  order: 1;
}

.transactionMetaData {
  border-top: 1px solid $brand-nearWhite;
  flex-grow: 0;
  order: 3;
  margin-top: $m-spacing;
  padding-top: $m-spacing;
  padding-right: 0 !important;

  @media only screen and (min-width: 48em) {
    border: none;
    margin-top: 0;
    padding-top: 0;
    order: 2;
  }
}

.detailGroup {
  display: block;
  margin-bottom: $base-spacing;
  word-wrap: break-word;

  &:last-child {
    margin-bottom: 0;
  }

  @media only screen and (min-width: 48em) {
    margin-bottom: $m-spacing;
  }
}

.detailIcon {
  display: inline-block;
  width: $m-spacing;
  margin-right: $s-spacing;
  float: left;
}

.detailInput {
  margin-right: $s-spacing;
}

.transactionCost {
  order: 2;
  padding-left: 0 !important; //Override flexboxgrid in this instance to prevent text from leaking outside of the container on mobile
  text-align: right;

  @media only screen and (min-width: 48em) {
    order: 3;
    padding-left: 1rem;
  }
}

.price {
  text-align: right;
}

.gwei {
  font-size: $h3-font-size;
  margin-bottom: $base-spacing;
  text-align: right;

  @media only screen and (min-width: 62em) {
    font-size: $h2-font-size;
  }
}

.currency {
  font-size: $h4-font-size;

  @media only screen and (min-width: 62em) {
    font-size: $h3-font-size;
  }
}