// All Focus styles result in a 2px $color-primary-focus box around the object. They vary by shape and build

// Adds a 2px outline with 2px offset. Shape is a rectangle
// Use for most objects
@mixin focus-default {
  transition: none;
  outline: $border-primary-focus;
  outline-offset: 2px;
}

// Adds a 2px shadow. Shape matches shape of object
// Use on object that needs more direct focus that doesn't have border styles
@mixin focus-wrap {
  transition: none;
  box-shadow: $box-shadow-focus;
  outline: none;
}

// Adds a 1px shadow and changes border color. Shape matches shape of object
// Use on object that needs more direct focus that has border styles
@mixin focus-wrap-border {
  transition: none;
  box-shadow: $box-shadow-focus-wrap;
  border-color: $color-primary-focus;
  outline: none;
}

// Adds a 2px inset shadow. Shape matches shape of object
// Use on object that needs more direct focus that doesn't have border styles, but has other objects bordering
@mixin focus-wrap-inset {
  transition: none;
  box-shadow: inset $box-shadow-focus;
  outline: none;
}
