@import '../../styles/animations';
@import '../../styles/variables';

$latency-status-size: 9px;
$icon-size: 24px;

.instructions {
  width: 100%;
  border-bottom: none;
  text-align: center;
  padding: 25px 0;
  font-size: 14px;
  color: var(--panel-full-height-instructions-text);
  text-align: center;
  font-family: var(--font-gotham-book);
}

.nodeSelectContainer {
  width: 680px !important;
}

.refreshDisabled {
  opacity: 0.3;
  cursor: default !important;
}

.tableContainer {
  display: flex;
  flex-direction: column;
  height: 500px;
  width: 680px;
  flex: 1;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--node-select-header-background);
    padding: 25px;
    min-height: 12px;

    .count {
      color: var(--node-select-node-count);
    }

    .refresh,
    .count,
    .automaticSelect {
      font-size: 14px;
      line-height: 14px;
      font-family: var(--font-gotham-book);

      svg {
        path {
          fill: var(--node-select-refresh-icon);
        }
      }
    }

    .refresh,
    .automaticSelect {
      cursor: pointer;
      display: flex !important;
      align-items: center;
      color: var(--panel-full-height-instructions-text);

      &.selected {
        cursor: default;
      }
    }

    .automaticSelect {
      font-family: var(--font-gotham-book);
      font-size: 14px;
      color: var(--node-select-automatic-select-button-text);
      svg path {
        fill: var(--node-select-icon-color);
      }
    }

    .refresh {
      .loading {
        animation: spin 2s linear infinite;
      }
    }
  }

  .icon {
    margin: 0px 8px;
    width: $icon-size;
    height: $icon-size;
  }

  .content {
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    .row {
      display: flex;
      min-height: min-content;
      padding: 20px 10px;
      font-size: 14px;

      &.odd {
        background-color: var(--dashboard-total-wallet-value-odd-row);
      }

      &.selected {
        background-color: rgba(90, 191, 107, 0.22);
      }

      > div {
        align-items: center;
        padding: 0 15px;
        line-height: 24px;
      }

      .latency {
        flex-basis: 15%;
        display: flex;

        div {
          width: $latency-status-size;
          height: $latency-status-size;
          margin-right: 10px;
          font-weight: 500;
          border-radius: 50%;

          &.good {
            background-color: #7ed321;
          }
          &.ok {
            background-color: #f7bc33;
          }
          &.fair {
            background-color: #ee6d66;
          }
        }
      }

      .blockHeight {
        flex-basis: 35%;
      }

      .url {
        flex-basis: 40%;
        color: #969aa0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
      }

      .select {
        flex-basis: 20%;
        display: flex;
        align-items: center;

        cursor: pointer;

        .icon {
          margin-right: 8px;
        }

        svg,
        svg path {
          fill: var(--node-select-icon-color);
        }
      }
    }
  }
}
