/* Utils */
/* 
 * The .visually-hidden class is used to hide elements visually while keeping them accessible to screen readers.
 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden {
  opacity:0;
}

.disabled {
  pointer-events: none;
  cursor: none;
}

.save-touch-target {
    display: flex;
    align-items: center;
    padding: 8px;
    margin: -8px;
    background-color: transparent;
}

.screen-reader-link {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 0.1rem;
  height: 0.1rem;
  transition: none;
  clip: rect(0, 0, 0, 0);
  transform: translateY(-25%);
  z-index: 20;
}

.screen-reader-link:active,
.screen-reader-link:focus {
    display: inline-block;
    position: absolute;
    top: -3.5rem;
    overflow: visible;
    width: auto;
    height: auto;
    clip: auto;
    padding: .5rem;
    color: var(--text-color-0);
    background-color: var(--focus-ring-color-0);
    border: 2px solid var(--background-color-1);
    transform: translateY(0);
}