@define-mixin border-l $width: var(--size-1), $style: solid,
  $color: var(--color-surface-inverse) {
  border-left: $width $style $color;
}

@define-mixin border-r $width: var(--size-1), $style: solid,
  $color: var(--color-surface-inverse) {
  border-right: $width $style $color;
}

@define-mixin border-t $width: var(--size-1), $style: solid,
  $color: var(--color-surface-inverse) {
  border-top: $width $style $color;
}

@define-mixin border-b $width: var(--size-1), $style: solid,
  $color: var(--color-surface-inverse) {
  border-bottom: $width $style $color;
}

@define-mixin border-x $width: var(--size-1), $style: solid,
  $color: var(--color-surface-inverse) {
  border-right: $width $style $color;
  border-left: $width $style $color;
}

@define-mixin border-y $width: var(--size-1), $style: solid,
  $color: var(--color-surface-inverse) {
  border-top: $width $style $color;
  border-bottom: $width $style $color;
}

@define-mixin rounded-top $radius {
  border-top-left-radius: $radius;
  border-top-right-radius: $radius;
}

@define-mixin rounded-bottom $radius {
  border-bottom-right-radius: $radius;
  border-bottom-left-radius: $radius;
}

@define-mixin rounded-left $radius {
  border-top-left-radius: $radius;
  border-bottom-left-radius: $radius;
}

@define-mixin rounded-right $radius {
  border-top-left-radius: $radius;
  border-bottom-left-radius: $radius;
}

@define-mixin circle {
  border-radius: 50%;
}

@define-mixin focus-ring $width: 2px, $color: var(--color-focus-ring), $offset: 2px {
  outline: $width solid $color;
  outline-offset: $offset;
}