// Utility classes to hide elements in different ways.
//
// Drupal provided CSS copied from the stable theme.

// Import site utilities.
@import '../../global/utils/init';

// Hide elements from all users.

// Used for elements which should not be immediately displayed to any user. An
// example would be collapsible details that will be expanded with a click
// from a user. The effect of this class can be toggled with the jQuery show()
// and hide() functions.
.hidden {
  display: none;
}

// Hide elements visually, but keep them available for screen readers.

// Used for information required for screen reader users to understand and use
// the site where visual display is undesirable. Information provided in this
// manner should be kept concise, to avoid unnecessary burden on the user.
// "!important" is used to prevent unintentional overrides.
.visually-hidden {
  @include element-invisible;
}

// The .focusable class extends the .visually-hidden class to allow
// the element to be focusable when navigated to via the keyboard.
.visually-hidden.focusable {
  @include element-focusable;
}

// Hide visually and from screen readers, but maintain layout.
.invisible {
  visibility: hidden;
}