@import 'styles.css';

.octopus-graph {
  max-width: 940px;
  padding: calc(var(--base-width) * 2);
  margin-left: auto;
  margin-right: auto;
  background-color: #FAFAFA;

  & .octopus-body {
    background-color: white;
    border: 1px solid #F2F2F2;
    padding: var(--base-width);
  }

  & .octopus-col {
    text-align: center;

    & .neighbor {
      height: 200px;
      margin-top: 5px;
      margin-bottom: 5px;
    }
  }

  & .octopus-title {
    padding: 8px 0;

    &.main-title {
      font-size: 24px;
      font-weight: var(--font-weight-extra-bold);
    }

    &.neighbor-title {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow-x: hidden;
      font-size: 16px;
      font-weight: var(--font-weight-bold);
    }
  }

  & .octopus-sr-gauge {
    padding-top: calc(var(--base-width) * 2);

    & .ant-progress-text {
      color: black;
    }
  }

  & .octopus-metric {
    line-height: 32px;

    &.status-good {
      color: var(--green);
    }
    &.status-poor {
      color: var(--red);
    }
    &.status-neutral {
      color: var(--graphgrey);
    }
    &.status-ok {
      color: var(--orange);
    }
  }
}