@mixin dsHover {
  outline: calc(#{space(xxs)} * 0.25) solid color(brand-primary, 600);
  outline-offset: calc(#{space(xxs)} * -0.25);
}

@mixin dsClearFocus() {
  border: none;
  box-shadow: none;
}

@mixin dsFocus($color: color(brand-primary, 600)) {
  outline: none;
  border: calc(#{space(xxs)} * 0.25) solid $color;
  box-shadow: inset 0 0 0 1px lighten($color, 30%);
  border-radius: 2px;
}
@mixin dsFocusAfter() {
  outline: none;
  position: relative;
  &:after {
    content: '';
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    @include dsFocus();
  }
}

@mixin dsBorderAfter($color: color(neutral, 400), $index: 0) {
  outline: none;
  position: relative;
  &:after {
    content: '';
    position: absolute;
    z-index: $index;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border: solid 1px $color;
    border-radius: 2px;
  }
}

@mixin dsActive() {
  outline: none;
  border: calc(#{space(xxs)} * 0.25) solid color(brand-primary, 700);
  border-radius: 2px;
}
@mixin dsFakeActive() {
  outline: none;
  box-shadow: inset 0 0 0 1px color(brand-primary, 700);
  border-radius: 2px;
}

@mixin dsFakeBorder() {
  box-shadow: inset 0 0 0 1px color(neutral, 200);
  border-radius: 2px;
}

@mixin dsWithError() {
  border-color: color(danger, 900);
  border-radius: 2px;
}

@mixin dsWithErrorFakeBorder() {
  box-shadow: inset 0 0 0 1px color(danger, 900);
  border-radius: 2px;
}

@mixin dsDisabled() {
  cursor: not-allowed;
  pointer-events: none;
  border-radius: 2px;
  background: color(neutral, 080);
  color: #616b7f;
}

@mixin dsDisabledWithBorder() {
  border: 1px solid color(neutral, 400);
  @include dsDisabled();
}

@mixin dsDisabledFakeBorder() {
  cursor: not-allowed;
  pointer-events: none;
  border-radius: 2px;
  border: none;
  box-shadow: inset 0 0 0 1px color(neutral, 400);
  @include dsDisabled();
}