@import '~scss/variables';
@import '~scss/mixins';

.node {
  margin-bottom: 0;

  &Status {
    padding: 25px 18px;
  }
}

.components {
  height: 100%;
  margin-bottom: 0;

  .wrapper {
    .list {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -3px;

      .item {
        flex: 1 0 250px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        margin: 3px;
        border-radius: 4px;
        background-color: $card-bg-color;
        overflow: hidden;

        &.disabled {
          opacity: 0.4;
          cursor: unset !important;

          p {
            font-size: 16px;
            color: $second-text-color;
          }
        }
      }

      &.service {
        .item {
          flex: 1 0 250px;
          justify-content: space-between;
          cursor: pointer;

          img {
            width: 94px;
            height: 20px;
          }

          p {
            height: 44px;
            line-height: 44px;
            font-size: 26px;
            font-weight: 600;

            span {
              font-size: $size-small;
              line-height: 20px;
            }
          }
        }
      }

      &.core {
        .item {
          height: 44px;

          &Icon {
            flex: 0 0 1;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 12px;

            &.healthy,
            &.ready {
              background-color: $green;
            }

            &.unhealthy,
            &.warn {
              background-color: $yellow;
            }

            &.danger {
              background-color: $red;
            }

            &.unknown {
              background-color: $grey;
            }
          }

          p {
            font-weight: 600;
            @include ellipsis;
          }
        }
      }
    }
  }
}
