.spectrum-Rule {
  width: 100%;
  overflow: visible;

  border: none;
  border-width: var(--spectrum-divider-medium-height, var(--spectrum-global-dimension-static-size-25));
  border-radius: var(--spectrum-divider-medium-height, var(--spectrum-global-dimension-static-size-25));
}

.spectrum-Rule--large {
  height: var(--spectrum-divider-large-height, var(--spectrum-global-dimension-static-size-50));

  border-radius: var(--spectrum-divider-large-border-radius, var(--spectrum-global-dimension-static-size-25));
}

.spectrum-Rule--medium {
  height: var(--spectrum-divider-medium-height, var(--spectrum-global-dimension-static-size-25));

  border-radius: var(--spectrum-divider-medium-border-radius, var(--spectrum-global-dimension-static-size-10));
}

.spectrum-Rule--small {
  height: var(--spectrum-divider-small-height, var(--spectrum-global-dimension-static-size-10));

  border-radius: var(--spectrum-divider-small-border-radius, var(--spectrum-global-dimension-static-size-10));
}

.spectrum-Rule--vertical {
  height: 100%;
}

.spectrum-Rule--vertical.spectrum-Rule--large {
    width: var(--spectrum-divider-large-vertical-width, var(--spectrum-global-dimension-static-size-50));
  }

.spectrum-Rule--vertical.spectrum-Rule--medium {
    width: var(--spectrum-divider-medium-vertical-width, var(--spectrum-global-dimension-static-size-25));
  }

.spectrum-Rule--vertical.spectrum-Rule--small {
    width: var(--spectrum-divider-small-veritcal-width, var(--spectrum-global-dimension-static-size-10));
  }

.spectrum-Rule--large {
  background-color: var(--spectrum-rule-large-background-color, var(--spectrum-global-color-gray-800));
}

.spectrum-Rule--medium {
  background-color: var(--spectrum-rule-medium-background-color, var(--spectrum-global-color-gray-300));
}

.spectrum-Rule--small {
  background-color: var(--spectrum-rule-small-background-color, var(--spectrum-global-color-gray-300));
}