system-status-counter.pcss.css

/**
 * @file
 * Styles for the system status counter component.
 */
.system-status-counter {
  display: inline-block;
  overflow-y: hidden;
  box-sizing: border-box;
  height: auto;
  padding: var(--admin-space-m) 0;
  white-space: nowrap;
  border-radius: var(--admin-radius-m);
  background: var(--admin-color-bg-surface);
  inline-size: 100%;
}

.system-status-counter__status-icon {
  display: inline-block;
  block-size: 65px;
  inline-size: 60px;
  vertical-align: middle;
  background-color: transparent;
  box-shadow: none;

  &::before {
    display: block;
    block-size: 100%;
    inline-size: 100%;
    content: "";
    mask-repeat: no-repeat;
    mask-position: center 16px;
    mask-size: 32px;

    &:dir(rtl) {
      mask-position: left center;
    }

    @media (forced-colors: active) {
      background-color: canvastext;
    }
  }

  @media screen and (min-width: 61rem) {
    inline-size: 65px;
  }
}

.system-status-counter__status-icon--error::before {
  background-color: var(--admin-color-error);
  mask-image: var(--admin-icon-error);
}

.system-status-counter__status-icon--warning::before {
  background-color: var(--admin-color-warning);
  mask-image: var(--admin-icon-warning);
}

.system-status-counter__status-icon--checked::before {
  background-color: var(--admin-color-success);
  mask-image: var(--admin-icon-status);
}

.system-status-counter__status-title {
  display: inline-block;
  padding: 0 18px;
  padding-inline-start: 0;
  vertical-align: middle;
  font-size: 1.125em;
  font-weight: bold;
  line-height: 1em;
}

.system-status-counter__title-count {
  display: block;
  margin-block-end: 8px;
  font-weight: var(--admin-font-weight-semibold);
}

.system-status-counter__details {
  display: block;
  text-transform: none;
  font-size: var(--admin-font-size-s);
  font-weight: normal;
  line-height: 1.5;
}