@use './mixins' as *;

// Use to hide content only visually
%visuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

// Use to only display content when it's focused, or one of its child elements is focused
// (i.e. when focus is within the element/container that the class was applied to)
//
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1

%visuallyHiddenFocusable {
  &:not(:focus):not(:focus-within) {
    @include visually-hidden();
  }
}

// Erase default button styles
%buttonUnstyled {
  background: transparent;
  border: none;
  outline: none;
  -webkit-appearance: none;
  border-radius: 0;
}

// Screen reader only
%screenReaderOnly {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

%list-unstyled {
  margin: 0;
  padding: 0;
  li {
    list-style: none;
  }
}

/* Add a transparent layer over an element to force it clickable */
%stretched-link {
  &:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: '';
    background-color: rgba(0, 0, 0, 0);
  }
}

%contentBeforeAbsoluteFull {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}