// Divider component styles using CSS variables
// CSS variables should be defined at :root level and mapped to theme settings

.divider {
  border: 0;
  margin: 0;
  padding: 0;
  border-color: var(--hscl-divider-borderColor, currentColor);
  border-style: var(--hscl-divider-borderStyle, solid);
}

// Horizontal divider (hr element)
.horizontal {
  width: var(--hscl-divider-width, 100%);
  height: 0;
  border: 0;
  border-top: var(--hscl-divider-borderWidth, 1px) var(--hscl-divider-borderStyle, solid) var(--hscl-divider-borderColor, currentColor);
  align-self: var(--hscl-divider-alignment, stretch);
  margin-block: var(--hscl-divider-marginBlock, 16px);
}

// Vertical divider (div element)
.vertical {
  width: 0;
  height: var(--hscl-divider-height, 100%);
  border: 0;
  border-left: var(--hscl-divider-borderWidth, 1px) var(--hscl-divider-borderStyle, solid) var(--hscl-divider-borderColor, currentColor);
  display: inline-block;
  align-self: var(--hscl-divider-alignment, stretch);
  margin-inline: var(--hscl-divider-marginInline, 16px);
}
