@import 'bulma/sass/utilities/initial-variables';

$bulma-a11y-base-darken-pct: 15%;
$bulma-a11y-dark-pct: 10%;

$danger: darken($red, $bulma-a11y-base-darken-pct) !default;
$danger-dark: darken($danger, $bulma-a11y-dark-pct) !default;

$info: darken($cyan, $bulma-a11y-base-darken-pct) !default;
$info-dark: darken($info, $bulma-a11y-dark-pct) !default;

$primary: darken($turquoise, $bulma-a11y-base-darken-pct) !default;
$primary-dark: darken($primary, $bulma-a11y-dark-pct) !default;

$success: darken($green, $bulma-a11y-base-darken-pct + 4%) !default;
$success-dark: darken($success, $bulma-a11y-dark-pct) !default;

$warning: darken($yellow, $bulma-a11y-base-darken-pct) !default;
$warning-dark: darken($warning, $bulma-a11y-dark-pct + 30%) !default;

@import 'bulma/bulma';

/*
 * Focus States
 */

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;
  }

  &.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;
  }
}

/*
 * 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;
  }
}