:host {
  color: var(--text-secondary);
  display: block;
}

.divider {
  display: flex;
  margin: 0;
}
.divider:not(.vertical) {
  width: 100%;
  padding: 4px 0;
  align-items: center;
  justify-content: center;
}
.divider:not(.vertical) .line {
  width: 100%;
  border-top: 1px solid var(--gray-300);
}
.divider:not(.vertical).has-content .slot-container {
  padding: 0 6px;
}
.divider.vertical {
  height: 100%;
  padding: 0 4px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.divider.vertical .line {
  height: 100%;
  border-right: 1px solid var(--gray-300);
}
.divider.vertical.has-content .slot-container {
  padding: 6px 0;
}

:host(:not([vertical])) {
  width: auto;
}

:host([vertical]) {
  height: auto;
}