// Flags.
.gin-status,
.views-field .marker,
.gin-beta-flag,
.gin-experimental-flag,
.gin-new-flag
{
  font-size: var(--gin-font-size-xxs);
  font-weight: var(--gin-font-weight-semibold);
  display: inline-block;
  padding: .125em .75em;
  vertical-align: .125em;
  border: 1px solid transparent;
  border-radius: var(--gin-border-l);
}

.gin-status,
.views-field .marker,
.gin-beta-flag,
.gin-experimental-flag,
.pb-project-categories__item,
.pb-module-page__categories-list-item {
  color: var(--gin-status-text);
  background: var(--gin-status-bg);
}

.gin-status--success,
.gin-new-flag,
.views-field .marker--published,
.pb-actions .project_status-indicator {
  color: var(--gin-status-success-text);
  background-color: var(--gin-status-success-bg);
}

.gin-status--success {
  .gin-status-icon {
    background-color: currentColor;
    mask-image: icon('status');
  }
}

.gin-status--warning {
  color: var(--gin-status-warning-text);
  background: var(--gin-status-warning-bg);

  .gin-status-icon {
    background-color: currentColor;
    mask-image: icon('warning');
  }
}

.gin-status--danger {
  color: var(--gin-status-danger-text);
  background: var(--gin-status-danger-bg);

  .gin-status-icon {
    background-color: currentColor;
    mask-image: icon('error');
  }
}

.gin-status {
  display: inline-flex;
  align-items: center;
  gap: var(--gin-spacing-xxs);

  &-icon {
    margin-inline-start: -0.5em;
  }
}
