_a11y.scss

@use "../abstracts" as *;

// Focus styles - even for IE11
*:focus {
  outline: 5px solid lime;
}
*:focus:not(:focus-visible) {
  outline: unset;
}
*:focus-visible {
  outline: 9px double black;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px white;
  border-radius: 0.125rem;
}
// Links MUST be blocks to make the focus work
// FIXME
// inline-block would also work,
// but then figure has a space at the bottom
// focus-rings on gallery-images are partly obscured
a:has(> img),
a:has(> svg) {
  display: block;
}

// https://www.tpgi.com/the-anatomy-of-visually-hidden/
// Contao uses .invisible for skiplinks
.invisible:not(:focus):not(:active),
.visually-hidden:not(:focus):not(:active) {
  @include visually-hidden;
}

// Skiplinks
.skip-to-main {
  position: absolute;
  left: 0.5rem;
  padding: 0.5rem 1.5rem;
  background-color: $color-neutral-900;
  border-radius: 0 0 0.25rem 0.25rem;
  color: $color-neutral-000;
  text-decoration: none;
  transform: translateY(-100%);
  transition: 325ms ease-in;
  &:focus-visible {
    color: $color-neutral-000;
    text-decoration: none;
    transform: translateY(0);
    transition: 325ms ease-in;
  }
}

a[href*="#skip"].invisible:focus-visible,
a[href*="#skip"].visually-hidden:focus-visible {
  // make them visible when focused
  @include visually-hidden-reset;
  // style the skiplinks
  padding: 0.5rem;
  background-color: $color-neutral-900;
  border-radius: 0.25rem;
  color: $color-neutral-000;
  text-decoration: none;
}


// Notifications
p {
  &.confirm {
    // irgendein grünes svg
  }
  &.error {
    font-weight: $font-weight-bold;
    color: $color-alert;
      &::before {
      content: "";
      display: inline-block;
      margin-inline-end: 0.25rem;
      margin-block-end: -0.25rem;
      width: 1.25rem;
      height: 1.25rem;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='#{$color-alert}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='icon icon-alert lucide lucide-circle-alert-icon lucide-circle-alert'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
      background-position: left 100%;
      background-repeat: no-repeat;
      color: $color-alert;
    }
  }
}

// Forced Colors Mode
@media (forced-colors: active) {
  svg {
    stroke: canvasText;
    fill: canvasText;
  }
}