:root{
  /* Border */
  --border-color: var(--grey-4);
  --border-color-base: var(--grey-4);

  /* Width */
  --border-width-none: 0px;
  --border-width-xs: 1px;
  --border-width-s: 2px;
  --border-width-m: 3px;
  --border-width-l: 5px;
  --border-width-xl: 10px;
  --border-width-xxl: 25px;
  --border-width-base: var(--border-width-xs);
  --border-width-thin: var(--border-width-xs);
  --border-width-thick: var(--border-width-s);
  --border-width-strong: var(--border-width-m);
  
  /* Style */
  --border-style-base: solid;
  --border-style-thin: dotted;
  --border-style-strong: double;


  /* Radius */
  --border-radius-none: 0px;
  --border-radius-base: 4px;
  --border-radius-sharp: 0.02em;
  --border-radius-xs: 2px;
  --border-radius-s: 4px;
  --border-radius-m: 6px;
  --border-radius-l: 10px;
  --border-radius-xl: 16px;
  --border-radius-pill: 999px;
  --border-radius-circle: 50%;
  
  --outline-width: var(--border-width-base);
  --outline-color: var(--accent);

  --border-base: var(--border-width-base) var(--border-style-base) var(--border-color);
  --border-none: none;
}

.border-inline-start,
.border-is {
  border-inline-start: var(--border-width-base) var(--border-style-base) var(--border-color);
}
.border-inline-end,
.border-ie {
  border-inline-end: var(--border-width-base) var(--border-style-base) var(--border-color);
}
.border-block-start,
.border-bs {
  border-block-start: var(--border-width-base) var(--border-style-base) var(--border-color);
}
.border-block-end,
.border-be {
  border-block-end: var(--border-width-base) var(--border-style-base) var(--border-color);
}
.border-block {
  border-block-start: var(--border-width-base) var(--border-style-base) var(--border-color);
  border-block-end: var(--border-width-base) var(--border-style-base) var(--border-color);
}
.border-inline {
  border-inline-start: var(--border-width-base) var(--border-style-base) var(--border-color);
  border-inline-end: var(--border-width-base) var(--border-style-base) var(--border-color);
}
.border,
.border-all {
  border: var(--border-base);
}
.border-strong-inline-start,
.border-strong-is {
  border-inline-start: var(--border-width-strong) var(--border-style-strong) var(--border-color-strong);
}
.border-strong-inline-end,
.border-strong-ie {
  border-inline-end: var(--border-width-strong) var(--border-style-strong) var(--border-color-strong);
}
.border-strong-block-start,
.border-strong-bs {
  border-block-start: var(--border-width-strong) var(--border-style-strong) var(--border-color-strong);
}
.border-strong-block-end,
.border-strong-be {
  border-block-end: var(--border-width-strong) var(--border-style-strong) var(--border-color-strong);
}
.border-strong-block,
.border-strong-b {
  border-block-start: var(--border-width-strong) var(--border-style-strong) var(--border-color-strong);
  border-block-end: var(--border-width-strong) var(--border-style-strong) var(--border-color-strong);
}
.border-strong-inline,
.border-strong-i {
  border-inline-start: var(--border-width-strong) var(--border-style-strong) var(--border-color-strong);
  border-inline-end: var(--border-width-strong) var(--border-style-strong) var(--border-color-strong);
}
.border-strong-all {
  border: var(--border-width-strong) var(--border-style-strong) var(--border-color-strong);
}
.sharp,
.border-radius-sharp {
  border-radius: var(--border-radius-sharp)
}
.border-radius-s {
  border-radius: var(--border-radius-s)
}
.border-radius {
  border-radius: var(--border-radius-base)
}
.pill,
.border-radius-pill {
  border-radius: var(--border-radius-pill)
}
.circle,
.border-radius-circle {
  border-radius: var(--border-radius-circle)
}

.drop-indicator {
  display: none;
  position: absolute;
  border: 2px solid transparent;
  transition: all 0.2s;
  pointer-events: none;
  z-index: var(--layer-top);
}

.drop-indicator.horizontal {
  height: var(--drop-indicator-width, 2px);
  width: 100%;
}

.drop-indicator.vertical {
  width: var(--drop-indicator-width, 2px);
  height: 100%;
}