$focus-width: 3px;

@mixin focused-text {
  outline: $focus-width solid transparent;
  color: $text-colour;
  background-color: $focus-colour;
  box-shadow:
    0 -2px $focus-colour,
    0 4px $text-colour;
  box-decoration-break: clone;
  text-decoration: none;
}

@mixin focused-box {
  outline: $focus-width solid transparent;
  box-shadow:
    0 0 0 4px $focus-colour,
    0 0 0 8px $text-colour;
}

/* Give a strong clear visual idea as to what is currently in focus */
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}

a:focus {
  @include focused-text;
}

input:focus,
textarea:focus,
select:focus {
  outline-offset: 0;
  outline: $focus-width solid $focus-colour;
  box-shadow: inset 0 0 0 2px $text-colour;
}

.multiple-choice {
  [type=radio]:focus + label::before {
    border-width: 4px;
    box-shadow: 0 0 0 4px $focus-colour;
  }

  [type=checkbox]:focus + label::before {
    border-width: 4px;
    box-shadow: 0 0 0 3px $focus-colour;
  }
}

.error {
  .form-control {
    &:focus {
      border-color: $text-colour;
    }
  }
}
