/* Accessibility helpers for Blazorponents. */
.bp-visually-hidden,
.bp-visually-hidden-offscreen,
.bp-announce,
.bp-focus-visible-only,
.bp-focus-visible-only--disabled {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

.bp-visually-hidden-offscreen {
  clip: auto;
  overflow: hidden;
  left: -9999px;
}

.bp-announce-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.bp-focus-visible-only:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

@supports selector(:has(:focus-visible)) {
  .bp-focus-visible-only:has(:focus-visible) {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

.bp-focus-visible-only--disabled {
  pointer-events: none;
}

.bp-focus-visible-only--disabled:focus,
.bp-focus-visible-only--disabled:focus-visible,
.bp-focus-visible-only--disabled:focus-within {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

.bp-visually-hidden-focusable:focus,
.bp-visually-hidden-focusable:focus-visible,
.bp-visually-hidden-focusable:focus-within {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.bp-skip-link {
  position: absolute;
  left: var(--bp-skip-link-left, var(--bp-space-3));
  top: var(--bp-skip-link-top, var(--bp-space-3));
  padding: 0.5rem 0.85rem;
  background: var(--bp-surface-inverse);
  color: var(--bp-inverse);
  border-radius: var(--bp-radius-md);
  border: 1px solid var(--bp-outline-strong);
  transform: translateY(-200%);
  transition: transform 0.2s ease;
  z-index: var(--bp-skip-link-z, 1000);
  text-decoration: none;
  font-weight: 600;
}

.bp-skip-link:focus,
.bp-skip-link:focus-visible {
  transform: translateY(0);
  outline: none;
  box-shadow: var(--bp-focus-ring);
}

.bp-skip-target {
  scroll-margin: var(--bp-skip-target-scroll-margin, initial);
  scroll-margin-top: var(--bp-skip-target-scroll-margin-top, var(--bp-space-6));
  scroll-margin-block-start: var(--bp-skip-target-scroll-margin-block-start, var(--bp-skip-target-scroll-margin-top, var(--bp-space-6)));
  scroll-margin-bottom: var(--bp-skip-target-scroll-margin-bottom, initial);
  scroll-margin-block-end: var(--bp-skip-target-scroll-margin-block-end, var(--bp-skip-target-scroll-margin-bottom, initial));
  scroll-margin-inline: var(--bp-skip-target-scroll-margin-inline, initial);
}

.bp-skip-target:focus,
.bp-skip-target:focus-visible {
  outline: none;
  box-shadow: var(--bp-focus-ring);
}