:host {
  width: 100%;
}

.wrap-table {
  margin: -3rem;

  table {

    tbody {

      tr {

        td {
          min-width: 10rem;
        }

        .status {
          position: relative;
          display: flex;
          align-items: center;

          .confirmation {
            position: absolute;
            top: 50%;
            left: -2rem;
            transform: translateY(-50%);
            display: flex;
            align-items: flex-end;
            width: 0.7rem;
            height: 1.5rem;

            .fill {
              width: 100%;
            }
          }

          .lock-transaction {
            position: absolute;
            left: -2rem;
            mask: url(../../assets/icons/lock-transaction.svg) no-repeat center;
            width: 1.2rem;
            height: 1.2rem;
            margin-right: 1.1rem;
          }

          .unlock-transaction {
            position: absolute;
            left: -2rem;
            mask: url(../../assets/icons/unlock-transaction.svg) no-repeat center;
            width: 1.2rem;
            height: 1.2rem;
            margin-right: 1.1rem;
          }

          .position {
            position: static;
          }

          .status-transaction {
            margin-right: 1rem;
            width: 1.7rem;
            height: 1.7rem;
          }

          &.send  {

            .status-transaction {
              mask: url(../../assets/icons/send.svg) no-repeat center;
            }
          }

          &.received {

            .status-transaction {
              mask: url(../../assets/icons/receive.svg) no-repeat center;
            }
          }
        }

        .remote-address {
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 25vw;
        }

        &:not(.transaction-details) {
          cursor: pointer;
        }

        &.transaction-details {
          -webkit-transition: 0.5s height linear, 0s font-size;
          transition: 0.5s height linear, 0s font-size;
          transition-delay: 0s, 0.5s;
          height: 0;

          &.open {
            height: 16.2rem;
          }

          td {
            position: relative;
            overflow: hidden;
            line-height: inherit;
            padding-top: 0;
            padding-bottom: 0;
          }
        }
      }
    }
  }
}
