.status-badge--pending,
.status-badge--configuring,
.status-badge--running,
.status-badge--ready {
  color: var(--color-info);
  background: var(--color-info-bg);
}

.status-badge--succeeded,
.status-badge--completed,
.status-badge--containers_ready,
.status-badge--configured,
.status-badge--connected {
  color: var(--color-success);
  background: var(--color-success-bg);
}

.status-badge--failed {
  color: var(--color-danger);
  background: var(--color-danger-bg);
}

.status-badge--cancelled,
.status-badge--disabled,
.status-badge--expired,
.status-badge--unknown,
.status-badge--not_configured,
.status-badge--pending_secure_configuration {
  color: #5c6675;
  background: #e9edf2;
}

.mobile-nav-more {
  min-inline-size: 0;
}

.mobile-nav-more > summary {
  list-style: none;
  cursor: pointer;
}

.mobile-nav-more > summary::-webkit-details-marker {
  display: none;
}

@media (max-width: 760px) {
  .mobile-nav-more {
    position: relative;
  }

  .mobile-nav-more--active > summary {
    color: var(--color-brand-700);
    background: var(--color-brand-100);
  }

  .mobile-nav-more--active > summary .mobile-nav-link__icon {
    color: white;
    background: var(--color-brand-700);
  }

  .mobile-nav-more__menu {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: calc(100% + 10px);
    inline-size: min(310px, calc(100vw - 24px));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: white;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .18);
  }

  .mobile-nav-more__menu .mobile-nav-link {
    min-block-size: 62px;
    padding: 7px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .mobile-nav-more__menu .mobile-nav-link--active {
    border-color: var(--color-brand-300);
    background: var(--color-brand-100);
  }
}