@import "client/common";

.listen-broadcast-state {

  .instructions {
    font-size:12px;
    margin:5px 0;
    padding:3px;
    width:100%;
    @include border_box_sizing;
  }

  .title {
    margin:5px 0 5px;
    text-align:center;
    font-size:14px;
  }

  .summary {

    font-size:14px;

    .user {display:none}

    .status {
      @include border_box_sizing;
      padding:5px;
      background-color:$poor;
      display:none;
      width:100%;
      margin-bottom:10px;
      font-size:16px;

      &.source_up { background-color:$good;}
      &.source_down { background-color:$good;}
      &.transition_up { background-color:$good;}
      &.transition_down { background-color:$good;}
    }

    .msg {
      text-align:center;
    }

    &[data-status=source_up] {.source_up { display:inline-block; }}
    &[data-status=source_down] {.source_down { display:inline-block; }}
    &[data-status=source_wrong_up] {.source_wrong_up { display:inline-block; }}
    &[data-status=source_wrong_down] {.source_wrong_down { display:inline-block; }}
    &[data-status=transition_up] {.transition_up { display:inline-block; }}
    &[data-status=transition_down] {.transition_down { display:inline-block; }}
    &[data-status=transition_timeout_up] {.transition_timeout_up { display:inline-block; }}
    &[data-status=transition_timeout_down] {.transition_timeout_down { display:inline-block; }}
    &[data-status=unknown] {.unknown { display:inline-block; }}
    &[data-status=loading] {.loading { display:inline-block; }}
    &[data-status=db_error] {.db_error{ display:inline-block; }}
  }

  .who-subtitle {
    position:absolute;
    text-align:center;
    width:26px;
    overflow:visible;
    font-size:12px;
  }

  .detail-subtitle {
    text-align:center;
    font-size:12px;

    span {
      font-style:italic;
      font-size:10px;
      padding:3px;
    }
  }

  .listen-broadcast-detail {
    position:relative;
    background-color:black;
    margin:5px 0;
    padding:2px;
  }

  .detail-items {

    height:80px;
    overflow:auto;
  }

  .details {

    height:135px;

    .title {
      margin-bottom:2px;
    }

    .who {
      margin:0 !important;
      position:absolute;
      text-align:center;
      overflow:visible;
      vertical-align:middle;
      line-height:26px;
    }
    .detail {
      text-align:center;
      line-height:26px;
      vertical-align: middle;
    }
  }
}
