/*
 * Focus States
 */

 // thanks @cityssm/bulma-a11y

a:focus,
button:focus 
  outline-color: $black
  outline-offset: 4px
  outline-style: dotted !important
  outline-width: 2px !important

  .has-background-black &,
  .has-background-dark & 
    outline-color: $white
  
a:focus 

  .has-text-white 
    outline-color: $white
  
.button:focus 

  &.is-black 
    outline-color: $black
  
  &.is-danger 
    outline-color: $danger-dark
  
  &.is-dark 
    outline-color: $dark
  
  &.is-info 
    outline-color: $info-dark
  
  &.is-link 
    outline-color: $link-dark
  
  &.is-primary 
    outline-color: $primary-dark
  
  &.is-success 
    outline-color: $success-dark
  
  &.is-warning 
    outline-color: $warning-dark
  
  .has-background-black &.is-inverted,
  .has-background-dark &.is-inverted 
    outline-color: $white
  
/*
 * Skip Links
 */

a.is-sr-only:focus,
button.is-sr-only:focus 
  position: fixed !important
  top: 10px
  left: 10px
  z-index: 100
  width: initial !important
  height: initial !important
  padding: $button-padding-vertical $button-padding-horizontal !important
  overflow: initial !important
  clip: initial !important
  white-space: initial !important

  &:not(.button) 
    background-color: $body-background-color
    border: initial !important