@rolemodel/optics/dist/css/components/divider.css

Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.

.divider {
  /* Public API (customizable component options) */
  --_op-divider-vertical-min-height: var(--op-space-large);
  --_op-divider-height-small: var(--op-border-width);
  --_op-divider-height-medium: var(--op-border-width-large);
  --_op-divider-height-large: var(--op-border-width-x-large);
  --_op-divider-padding-small: var(--op-space-2x-small);
  --_op-divider-padding-medium: var(--op-space-x-small);
  --_op-divider-padding-large: var(--op-space-medium);

  /* Private API (component option defaults) */
  --__op-divider-height: var(--_op-divider-height-small);
  --__op-divider-padding: 0;

  width: 100%;
  height: var(--__op-divider-height);
  background-color: var(--op-color-border);
  margin-block: var(--__op-divider-padding);
  margin-inline: 0;

  /* Size Modifiers */
  &.divider--small {
    --__op-divider-height: var(--_op-divider-height-small);
  }

  &.divider--medium {
    --__op-divider-height: var(--_op-divider-height-medium);
  }

  &.divider--large {
    --__op-divider-height: var(--_op-divider-height-large);
  }

  /* Spacing Modifiers */
  &.divider--spacing-small {
    --__op-divider-padding: var(--_op-divider-padding-small);
  }

  &.divider--spacing-medium {
    --__op-divider-padding: var(--_op-divider-padding-medium);
  }

  &.divider--spacing-large {
    --__op-divider-padding: var(--_op-divider-padding-large);
  }

  /* Direction Modifier */
  &.divider--vertical {
    width: var(--__op-divider-height);
    height: 100%;
    min-height: var(--_op-divider-vertical-min-height);
    margin-block: 0;
    margin-inline: var(--__op-divider-padding);
  }
}