@import '~scss/variables';

.card {
  position: relative;
  width: 200px;
  padding-top: 20px;

  &.error {
    .type {
      background-color: #ca2621;
    }
    .wrapper {
      border: solid 1px #ca2621;
    }
  }
}

.wrapper {
  padding: 20px 12px 12px;
  border-radius: $border-radius;
  box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06);
  background-color: #fff;
}

.detail {
  padding: 8px;
  border-radius: 4px;
  background-color: $lightest;

  & > p {
    font-family: $font-family-id;
    font-weight: $font-bold;
    line-break: 1.67;

    :global .icon {
      margin-top: -2px;
      margin-right: 12px;
    }

    & + p {
      margin-top: 2px;
    }
  }
}

.gatewayName {
  font-family: $font-family-id;
  font-weight: $font-bold;
  line-height: 1.67;

  :global .icon {
    margin-right: 10px;
  }
}

.workload {
  margin-top: 12px;
  padding: 2px 8px 2px 2px;
  border-radius: 3px;
  background-color: $bg-color;
  font-family: $font-family-id;
  font-weight: $font-bold;
  line-height: 16px;
  display: flex;
  flex-wrap: wrap;

  & > span {
    &:first-child {
      display: inline-block;
      padding: 0 6px;
      margin-right: 6px;
      border-radius: 1px;
      background-color: #36435c;
      text-shadow: 0 2px 4px rgba(36, 46, 66, 0.1);
      font-weight: $font-bold;
      line-height: 16px;
      color: #fff;
    }
  }
}

.type {
  position: absolute;
  width: 92px;
  top: 0;
  left: 50%;
  padding: 4px 12px;
  font-weight: $font-bold;
  line-height: 1.67;
  color: #fff;
  border-radius: 16px;
  background-color: #242e42;
  transform: translateX(-50%);
  text-align: center;

  :global .icon {
    margin-top: -2px;
    margin-right: 4px;
  }
}
