@import '../../../styles/skeleton-screen';

.co-utilization-card-popover__body {
  min-height: var(--pf-global--spacer--lg);
}

.co-utilization-card-popover__consumer-list {
  list-style-type: none;
  padding-left: 0;
}

.co-utilization-card-popover__consumer-name {
  flex: 0 0 calc(70% - var(--pf-global--spacer--md));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.co-utilization-card-popover__consumer-value {
  color: var(--pf-global--Color--200);
  flex: 0 0 30%;
  text-align: right;
  white-space: nowrap;
}

.co-utilization-card-popover__description {
  padding: var(--pf-global--spacer--sm) 0;
}

.co-utilization-card-popover__dropdown {
  margin: var(--pf-global--spacer--sm) 0;
}

.co-utilization-card-popover__dropdown,
.co-utilization-card-popover__dropdown > div,
.co-utilization-card-popover__dropdown .pf-c-dropdown__toggle {
  width: 100%;
}

.co-utilization-card-popover__limit-icon {
  margin-left: var(--pf-global--spacer--sm);
}

.co-utilization-card-popover__consumer-item {
  display: flex;
  justify-content: space-between;
}

.co-utilization-card-popover__title {
  font-weight: var(--pf-global--FontWeight--bold);
}

.skeleton-consumer {
  animation: $skeleton-animation;
  background: $skeleton-color;
  height: var(--pf-global--spacer--md);
  opacity: 0;
  margin-top: var(--pf-global--spacer--sm);
  margin-bottom: var(--pf-global--spacer--sm);
  &::after {
    background-repeat: no-repeat;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
  }
}
