/*

  ExplorerSignalLog Component Styles
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  Also known as CanLog

*/

@import "../../styles/_global/all.scss";

.signals-log-list {
  color: $color-grey-80;
  font-size: 14px;
  &-time {
    flex: 1;
  }
  &-message {
    flex: 3;
  }
  &-bytes {
    flex: 2;
  }
  &-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    font-size: 11px;
    padding: 2% 3% 2% 7%;
    text-transform: uppercase;
  }
  &-item {
    border-color: transparent;
    border-style: solid;
    border-width: 1px 0;
    padding-right: 3%;
    position: relative;
    transition-duration: 0.1s;
    &:not(.is-expanded):hover {
      background: rgba(0, 0, 0, 0.02);
    }
    &:not(.is-expanded):active {
      padding-top: 0.5%;
      padding-bottom: 0.5%;
    }
    &.has-signals {
      &:before {
        color: $color-grey-80;
        content: $fa-var-chevron-right;
        display: block;
        font-family: "FontAwesome";
        font-size: 8px;
        line-height: 26px;
        text-align: center;
        pointer-events: none;
        position: absolute;
        transition-duration: 0.1s;
        width: 8%;
      }
    }
    &.is-expanded {
      background: rgba(0, 0, 0, 0.02);
      border-color: rgba(0, 0, 0, 0.1);
      padding-top: 1%;
      &:before {
        margin-top: -3px;
        transform: rotate(90deg);
      }
    }
    &-header {
      cursor: pointer;
      display: flex;
      padding: 1% 0 1% 7%;
    }
  }
  &-signals {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  &-signal {
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    font-size: 12px;
    padding: 1% 0 1% 7%;
    &-message {
      flex: 3;
    }
    &-value {
      flex: 2;
      padding-right: 5%;
    }
    &-action {
      flex: 1;
      button {
        font-size: 10px;
        width: 100%;
      }
    }
  }
}