.separator {
  background: var(--hs-color-separator-bg);
  border: 0;

  --hs-separator-spacing: 0;
}

.separator--spacing-1 { --hs-separator-spacing: var(--hs-spacing-base); }
.separator--spacing-2 { --hs-separator-spacing: calc(var(--hs-spacing-base) * 2); }
.separator--spacing-3 { --hs-separator-spacing: calc(var(--hs-spacing-base) * 3); }
.separator--spacing-4 { --hs-separator-spacing: calc(var(--hs-spacing-base) * 4); }
.separator--spacing-5 { --hs-separator-spacing: calc(var(--hs-spacing-base) * 5); }
.separator--spacing-6 { --hs-separator-spacing: calc(var(--hs-spacing-base) * 6); }
.separator--spacing-7 { --hs-separator-spacing: calc(var(--hs-spacing-base) * 7); }
.separator--spacing-8 { --hs-separator-spacing: calc(var(--hs-spacing-base) * 8); }
.separator--spacing-9 { --hs-separator-spacing: calc(var(--hs-spacing-base) * 9); }
.separator--spacing-10 { --hs-separator-spacing: calc(var(--hs-spacing-base) * 10); }
.separator--spacing-11 { --hs-separator-spacing: calc(var(--hs-spacing-base) * 11); }
.separator--spacing-12 { --hs-separator-spacing: calc(var(--hs-spacing-base) * 12); }

.separator--size-1 { --hs-separator-size: calc(var(--hs-spacing-small) * 0.5); }
.separator--size-2 { --hs-separator-size: calc(var(--hs-spacing-small) * 1); }
.separator--size-3 { --hs-separator-size: calc(var(--hs-spacing-small) * 1.5); }
.separator--size-4 { --hs-separator-size: calc(var(--hs-spacing-small) * 2); }
.separator--size-5 { --hs-separator-size: calc(var(--hs-spacing-small) * 2.5); }
.separator--size-6 { --hs-separator-size: calc(var(--hs-spacing-small) * 3); }

.separator--direction-horizontal {
  min-width: 100%;
  min-height: var(--hs-separator-size);
  margin: var(--hs-separator-spacing) 0;
}

.separator--direction-vertical {
  min-height: 100%;
  width: var(--hs-separator-size);
  margin: 0 var(--hs-separator-spacing);
}

.separator--direction-horizontal + .separator--direction-horizontal,
.separator--direction-vertical + .separator--direction-vertical {
  display: none;
}