/* Miscellaneous traits */

:root {
  --borderRadiusXSmall: 1px;
  --borderRadiusSmall: 2px;
  --borderRadiusMedium: 3px;
  --borderRadiusLarge: 5px;
  --borderRadiusHuge: 8px;
}

/* Radius */

.br-none {
  border-radius: 0;
}

.br-xsmall {
  border-radius: var(--borderRadiusXSmall);
}

.br-small {
  border-radius: var(--borderRadiusSmall);
}

.br-medium {
  border-radius: var(--borderRadiusMedium);
}

.br-large {
  border-radius: var(--borderRadiusLarge);
}

.br-huge {
  border-radius: var(--borderRadiusHuge);
}

/* Visibility */

.hide-all {
  display: none;
}
@media (min-width: 1400px) {
  .hide-widescreen {
    display: none;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  .hide-desktop {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet-wide {
    display: none;
  }
}
@media (min-width: 640px) and (max-width: 767px) {
  .hide-tablet {
    display: none;
  }
}
@media (max-width: 639px) {
  .hide-phone {
    display: none;
  }
}

@media (min-width: 1400px) {
  .show-widescreen {
    display: block;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  .show-desktop {
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .show-tablet-wide {
    display: block;
  }
}
@media (min-width: 640px) and (max-width: 767px) {
  .show-tablet {
    display: block;
  }
}
@media (max-width: 639px) {
  .show-phone {
    display: block;
  }
}

@media (min-width: 1400px) {
  .show-widescreen--i {
    display: inline;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  .show-desktop--i {
    display: inline;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .show-tablet-wide--i {
    display: inline;
  }
}
@media (min-width: 640px) and (max-width: 767px) {
  .show-tablet--i {
    display: inline;
  }
}
@media (max-width: 639px) {
  .show-phone--i {
    display: inline;
  }
}

@media (min-width: 1400px) {
  .show-widescreen--ib {
    display: inline-block;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  .show-desktop--ib {
    display: inline-block;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .show-tablet-wide--ib {
    display: inline-block;
  }
}
@media (min-width: 640px) and (max-width: 767px) {
  .show-tablet--ib {
    display: inline-block;
  }
}
@media (max-width: 639px) {
  .show-phone--ib {
    display: inline-block;
  }
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.hide-visually {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.hide-visually.focusable:active,
.hide-visually.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/**
 * Width helpers
 * Mostly relevant for tables.
 */

.w-100 {
  width: 100%;
}

.w-75 {
  width: 75%;
}

.w-50 {
  width: 50%;
}

.w-25 {
  width: 25%;
}

.w-0 {
  width: 0;
}

.minw-10r {
  min-width: 10rem;
}

.minw-20r {
  min-width: 20rem;
}

.minw-30r {
  min-width: 30rem;
}