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

.wrapper {
  padding: 12px;
  border-radius: 4px;
  border: 1px solid $light-color03;
  background-color: #fff;
  transition: all $trans-speed ease-in-out;

  &:hover {
    box-shadow: 0 8px 16px 0 rgba(36, 46, 66, 0.08);
  }
}

.header {
  display: flex;
  position: relative;
}

.title {
  margin-left: 20px;
}

.right {
  position: absolute;
  @include vertical-center;
  right: 0;
}

.pods {
  margin-top: 12px;
  max-height: 128px;
  overflow-y: auto;

  & > li {
    padding: 8px 12px;
    border-radius: 4px;
    background-color: $lightest;

    & > a {
      font-family: $font-family-id;
      font-weight: $font-bold;
      line-height: 1.67;
      margin-left: 12px;
    }

    & + li {
      margin-top: 4px;
    }
  }
}

.metric {
  float: right;
  margin-right: 40px;

  & > div {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    min-width: 46px;
    font-family: $font-family-id;
    font-size: 10px;
    font-weight: $font-bold;
    line-height: 2;
    color: #242e42;
  }
}

.icon {
  display: inline-block;
  position: relative;

  .status {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;

    &.running {
      background-color: $green;
      box-shadow: 0 4px 8px 0 rgba(85, 188, 138, 0.32);
    }

    &.updating {
      background-color: $yellow;
      box-shadow: 0 4px 8px 0 rgba(245, 166, 35, 0.32);
    }
  }
}

.offline {
  background-color: $light-color07;
}
