:host {
  color: var(--manifold-text-color);
  font-weight: var(--manifold-status-font-weight);
  font-size: var(--manifold-status-font-size);
  font-family: var(--manifold-font-family);
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}

@keyframes spin {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}

.icon {
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
          align-items: center;
  margin-right: 0.5em
}

.icon manifold-icon {
    -webkit-animation-name: spin;
            animation-name: spin;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }

.icon-status {
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  background: var(--status-icon-color);
  border-radius: 50%;
  content: '';
}

.status {
  position: relative;
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
          align-items: center;
  padding: var(--manifold-status-padding);
  color: var(--status-text-color);
  text-transform: lowercase
}

.status > * {
    z-index: 1;
  }

.status {

  --status-text-color: var(--manifold-status-text-color);
  --status-icon-color: var(--manifold-status-icon-color);
  --status-background: var(--manifold-status-background);
  --status-background-opacity: var(--manifold-status-background-opacity)
}

.status[data-status='AVAILABLE'] {
    --status-text-color: var(--manifold-status-text-color-available);
    --status-icon-color: var(--manifold-status-icon-color-available);
    --status-background: var(--manifold-status-background-available);
    --status-background-opacity: var(--manifold-status-background-opacity-available);
  }

.status[data-status='CREATING'],
  .status[data-status='UPDATING'],
  .status[data-status='DELETING'] {
    --status-text-color: var(--manifold-status-text-color-processing);
    --status-icon-color: var(--manifold-status-icon-color-processing);
    --status-background: var(--manifold-status-background-processing);
    --status-background-opacity: var(--manifold-status-background-opacity-processing);
  }

.status[data-status='ERROR_CREATING'],
  .status[data-status='ERROR_UPDATING'],
  .status[data-status='ERROR_DELETING'] {
    --status-text-color: var(--manifold-status-text-color-error);
    --status-icon-color: var(--manifold-status-icon-color-error);
    --status-background: var(--manifold-status-background-error);
    --status-background-opacity: var(--manifold-status-background-opacity-error);
  }

.status[data-status='loading'] {
    --status-text-color: var(--manifold-status-text-color-loading);
    --status-icon-color: var(--manifold-status-icon-color-loading);
    --status-background: var(--manifold-status-background-loading);
    --status-background-opacity: var(--manifold-status-background-opacity-loading);
  }

.status[data-status='DELETED'] {
    --status-text-color: var(--manifold-status-text-color-deleted);
    --status-icon-color: var(--manifold-status-icon-color-deleted);
    --status-background: var(--manifold-status-background-deleted);
    --status-background-opacity: var(--manifold-status-background-opacity-deleted);
  }

.status::before {
    --status-background: var(--manifold-status-background-available);

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--status-background);
    border: var(--manifold-status-border);
    border-radius: var(--manifold-status-radius);
    opacity: 1; /* var(--manifold-status-background-opacity); */
    content: '';
  }

.status span::first-letter {
    text-transform: uppercase;
  }

.status .icon,
  .status .icon-status,
  .status manifold-icon {
    width: 0.5em;
    height: 0.5em;
  }

.status[data-size='small'] {
    font-size: var(--manifold-font-d1);
  }

.status[data-size='xsmall'] {
    padding: 0;
    font-size: var(--manifold-font-d1)
  }

.status[data-size='xsmall']::before {
      display: none;
    }