:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

:host {
  --color: var(--sl-panel-border-color);
  --width: 1px;
  --spacing: var(--sl-spacing-medium);
  --margin: var(--sl-spacing-xx-small);
  display: block;
}

:host([direction=vertical]) {
  display: inline-block;
}

.divider--horizontal {
  display: flex;
  flex-direction: row;
}
.divider--horizontal:before, .divider--horizontal:after {
  content: "";
  flex: 1 1;
  border-bottom: solid var(--width) var(--color);
  margin: auto;
}
.divider--horizontal.divider--has-label:before {
  margin-right: var(--sl-spacing-x-small);
}
.divider--horizontal.divider--has-label:after {
  margin-left: var(--sl-spacing-x-small);
}

.divider--vertical {
  display: inline;
  height: 100%;
  border-left: solid var(--width) var(--color);
  margin: var(--margin) var(--spacing);
}