:root {
  --ds-border-rule: 0.0625rem solid var(--ds-color-london-85);
  --ds-border-rule--emphasised: 0.0625rem solid var(--ds-color-london-5);
  --ds-border-rule--inverse: 0.0625rem solid var(--ds-color-london-35);
  --ds-border-rule--inverse-emphasised: 0.0625rem solid var(--ds-color-london-100);
  --ds-border-rule--heavy: 0.25rem solid var(--ds-color-london-5);
  --ds-border-rule--inverse-heavy: 0.25rem solid var(--ds-color-london-100);
  --ds-border-rule--accent: 0.25rem solid var(--ds-color-economist-red);
  --ds-border-rule--inverse-accent: 0.25rem solid var(--ds-color-london-100);
}

.ds-rule {
  background: var(--ds-color-london-85);
  border: 0;
  height: 0.0625rem;
  margin: 0;
  width: 100%;
}

.ds-rule--inverse {
  background: var(--ds-color-london-35);
}

.ds-rule--emphasised {
  background: var(--ds-color-london-5);
  &.ds-rule--inverse {
    background: var(--ds-color-london-100);
  }
}

.ds-rule--heavy {
  background: var(--ds-color-london-5);
  height: 0.25rem;
  &.ds-rule--inverse {
    background: var(--ds-color-london-100);
  }
}

.ds-rule--accent {
  background: var(--ds-color-economist-red);
  height: 0.25rem;
  width: 1.875rem;
  &.ds-rule--inverse {
    background: var(--ds-color-london-100);
  }
}