@import 'common/sass/variables';
@import 'common/sass/mixins';

$hover-speed: 150ms;
$identicon-size: 36px;
$identicon-size-mobile: 24px;

.RecentTx {
  line-height: $identicon-size;
  border: 1px solid $gray-lighter;
  cursor: pointer;
  transition: box-shadow $hover-speed ease;
  box-shadow: 0 0 $brand-primary inset;

  &-to {
    width: 100%;
    max-width: 0;
    @include mono;
    @include ellipsis;

    .Identicon {
      display: inline-block;
      width: $identicon-size !important;
      height: $identicon-size !important;
      margin-right: $space-md;
    }
  }

  &-time {
    opacity: 0.88;
  }

  &-arrow {
    padding-left: $space-md;
    font-size: 22px;
    opacity: 0.3;
    transition-property: opacity, color, transform;
    transition-duration: $hover-speed;
    transition-timing-function: ease;
  }

  &:hover {
    box-shadow: 3px 0 $brand-primary inset;

    .RecentTx-arrow {
      opacity: 1;
      color: $brand-primary;
      transform: translateX(3px);
    }
  }

  // Responsive handling
  @media (max-width: $screen-md) {
    font-size: $font-size-xs;
    line-height: $identicon-size-mobile;

    &-to .Identicon {
      width: $identicon-size-mobile !important;
      height: $identicon-size-mobile !important;
    }

    &-arrow .fa {
      display: none;
    }
  }
}