:root {
  --border-size: 1px;
  --border-size-medium: 2px;
  --border-style: solid;
  --border-color: var(--color-border);
}

.bordered,
:local(.bordered) {
  border: var(--border-size) var(--border-style) var(--color-border);
}

.border-bottom,
:local(.border-bottom) {
  border-bottom: var(--border-size) var(--border-style) var(--color-border);
}

/* ensure that a border-top item inside of a bordred element won't double up */
.bordered > .border-bottom:last-child {
  border-bottom: none;
}

.border-top,
:local(.border-top) {
  border-top: var(--border-size) var(--border-style) var(--color-border);
}

/* ensure that a border-top item inside of a bordred element won't double up */
.bordered > .border-top:first-child {
  border-top: none;
}

.border-column-divider {
  border-right: var(--border-size) var(--border-style) var(--color-border);
}

.border-column-divider:last-child {
  border-right: none;
}

.border-row-divider {
  border-bottom: var(--border-size) var(--border-style) var(--color-border);
}

.border-row-divider:last-child {
  border-bottom: none;
}

.border-right {
  border-right: var(--border-size) var(--border-style) var(--color-border);
}

.border-left {
  border-left: var(--border-size) var(--border-style) var(--color-border);
}

.border-light {
  border-color: color-mod(var(--color-border) alpha(-80%)) !important;
}

.border-error,
:local(.border-error) {
  border-color: var(--color-error) !important;
}

.border-gold {
  border-color: var(--color-warning) !important;
}

.border-success {
  border-color: var(--color-success) !important;
}

.border-brand,
:local(.border-brand) {
  border-color: var(--color-brand) !important;
}

.border-transparent {
  border-color: transparent;
}

.border-brand-hover:hover {
  border-color: var(--color-brand);
}

.border-hover:hover {
  border-color: var(--color-border);
}

/* BORDERLESS IS THE DEFAULT */
/* ONLY USE IF needing to override an existing border! */
/* ensure there is no border via important */
.borderless,
:local(.borderless) {
  border: none !important;
}

.border-dashed {
  border-style: dashed;
}

.border-dashed-bottom,
:local(.border-bottom) {
  border-bottom: var(--border-size) dashed var(--color-border);
}

.border-medium {
  border-width: var(--border-size-medium);
}