@border-dark: hsl(0, 0%, 82%);
@border-dark-soft: hsl(0, 0%, 90%);
@border-dark-softer: hsl(0, 0%, 96%);

@border-light: hsl(0, 0%, 100%);
@border-light-soft: hsl(0, 0%, 60%);
@border-light-softer: hsl(0, 0%, 35%);

@default-border-color: @border-dark-soft;

@border-radius-1: .125rem;
@border-radius-2: .25rem;
@border-radius-3: .5rem;

@border-width-1: 1px;
@border-width-2: 2px;
@border-width-4: 4px;
@border-width-8: 8px;

// Base
@border-width-scale:
  default 1px,
  '2' 2px,
  '4' 4px,
  '8' 8px,
  '0' 0,
;
.define-border-widths(@border-width-scale; @default-border-color; @screens);

// Colors
@border-colors:
  'dark' @border-dark,
  'dark-soft' @border-dark-soft,
  'dark-softer' @border-dark-softer,

  'light' @border-light,
  'light-soft' @border-light-soft,
  'light-softer' @border-light-softer,
;

.define-border-colors(@border-colors; @screens);

// Styles
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }

// Radius
.rounded-sm { border-radius: @border-radius-1; }
.rounded-t-sm { border-top-left-radius: @border-radius-1; border-top-right-radius: @border-radius-1; }
.rounded-r-sm { border-top-right-radius: @border-radius-1; border-bottom-right-radius: @border-radius-1; }
.rounded-b-sm { border-bottom-left-radius: @border-radius-1; border-bottom-right-radius: @border-radius-1; }
.rounded-l-sm { border-top-left-radius: @border-radius-1; border-bottom-left-radius: @border-radius-1; }

.rounded { border-radius: @border-radius-2; }
.rounded-t { border-top-left-radius: @border-radius-2; border-top-right-radius: @border-radius-2; }
.rounded-r { border-top-right-radius: @border-radius-2; border-bottom-right-radius: @border-radius-2; }
.rounded-b { border-bottom-left-radius: @border-radius-2; border-bottom-right-radius: @border-radius-2; }
.rounded-l { border-top-left-radius: @border-radius-2; border-bottom-left-radius: @border-radius-2; }

.rounded-lg { border-radius: @border-radius-3; }
.rounded-t-lg { border-top-left-radius: @border-radius-3; border-top-right-radius: @border-radius-3; }
.rounded-r-lg { border-top-right-radius: @border-radius-3; border-bottom-right-radius: @border-radius-3; }
.rounded-b-lg { border-bottom-left-radius: @border-radius-3; border-bottom-right-radius: @border-radius-3; }
.rounded-l-lg { border-top-left-radius: @border-radius-3; border-bottom-left-radius: @border-radius-3; }

.pill { border-radius: 9999px; }

// Responsive
.responsive({
  &border-dashed { .border-dashed; }
  &border-dotted { .border-dotted; }
  &rounded-sm { .rounded-sm; }
  &rounded-t-sm { .rounded-t-sm; }
  &rounded-r-sm { .rounded-r-sm; }
  &rounded-b-sm { .rounded-b-sm; }
  &rounded-l-sm { .rounded-l-sm; }
  &rounded { .rounded; }
  &rounded-t { .rounded-t; }
  &rounded-r { .rounded-r; }
  &rounded-b { .rounded-b; }
  &rounded-l { .rounded-l; }
  &rounded-lg { .rounded-lg; }
  &rounded-t-lg { .rounded-t-lg; }
  &rounded-r-lg { .rounded-r-lg; }
  &rounded-b-lg { .rounded-b-lg; }
  &rounded-l-lg { .rounded-l-lg; }
  &pill { .pill; }
});