@use "sass:map";

.vuiHorizontalRule {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid;
  width: 100%;
}

// Color
$color: (
  accent: (
    "border-color": var(--vui-color-accent-shade)
  ),
  primary: (
    "border-color": var(--vui-color-primary-shade)
  ),
  success: (
    "border-color": var(--vui-color-success-shade)
  ),
  danger: (
    "border-color": var(--vui-color-danger-shade)
  ),
  warning: (
    "border-color": var(--vui-color-warning-shade)
  ),
  neutral: (
    "border-color": var(--vui-color-border-medium)
  ),
  subdued: (
    "border-color": var(--vui-color-border-light)
  )
);

@each $colorName, $colorValue in $color {
  .vuiHorizontalRule--#{$colorName} {
    border-bottom-color: #{map.get($colorValue, "border-color")};
  }
}