:host {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--s-space-8);
}

  :host * {
    box-sizing: border-box;
  }

  :host(.separator--orientation-vertical) {
    display: inline-flex;
    width: auto;
    flex-direction: column;
  }

  :host(.separator--orientation-vertical) .separator__line {
      width: var(--s-border-width-default);
      height: 100%;
      min-height: 1.125rem;
    }

  :host(.separator--color-critical) .separator__line {
      background-color: var(--s-border-critical);
    }

  :host(.separator--color-critical) .separator__label {
      color: var(--s-text-subdued);
    }

  :host(.separator--color-strong) .separator__line {
      background-color: var(--s-border-strong);
    }

  :host(.separator--color-strong) .separator__label {
      color: var(--s-text-subdued);
    }

  :host(.separator--color-highlight) .separator__line {
      background-color: var(--s-border-highlight);
    }

  :host(.separator--color-highlight) .separator__label {
      color: var(--s-text-highlight);
    }

.separator__line {
  display: block;
  width: 100%;
  height: var(--s-border-width-default);
  background-color: var(--s-border-on-translucent);
}

.separator__label {
  flex-shrink: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: var(--s-font-size-sm);
  color: var(--s-text-disabled);
}