.generate-responsive-version(@ruleset, @screen, @min-width) {
  @prefix: ~"@{screen}\:";

  @media (min-width: @min-width) {
    .@{prefix} { @ruleset(); };
  }
}

.responsive(@ruleset; @i: 1) when (@i <= length(@screens)) {
  @screen: extract(@screens, @i);
  @name: extract(@screen, 1);
  @screen-width: extract(@screen, 2);

  .generate-responsive-version(@ruleset, @name, @screen-width);
  .responsive(@ruleset, @i + 1);
}

.screen(@screen, @ruleset) {
  .extract-match(@screens; @screen);
  @media (min-width: @__match) {
    @ruleset();
  }
}

.no-focus {
  &:focus, &:active {
    outline: none;
  }
}

.no-wrap {
  white-space: nowrap;
}

.box-shadow {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.box-shadow-soft {
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.box-shadow-z2 {
  box-shadow: 0 15px 35px hsla(240, 10%, 28%, 0.15), 0 5px 15px rgba(0,0,0,.07);
}

.responsive({
  &box-shadow-z2 { .box-shadow-z2; }
});

.inset-shadow {
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

.tab-focus {
  // Default
  outline: thin dotted;
  // WebKit
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.full-height {
  min-height: 100vh;
}

.full-width {
  width: 100%;
}

.clickable {
  cursor: pointer;
  user-select: none;
}

.no-select {
  user-select: none;
}

.ease {
  transition: all 0.2s ease;
}

// Useful for hiding things like radio buttons without making them inaccessible
// to the keyboard when navigating forms.
.pseudo-hidden {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

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

.mask { overflow: hidden; }

.aspect-2\:1 {
  padding-bottom: 50%;
}

.aspect-16\:9 {
  padding-bottom: 56.25%;
}

.hover-only {
  opacity: 0;
  &:hover {
    opacity: 1;
  }
}

.responsive({
  &hover-only { .hover-only; }
});

.bg-cover {
  background-size: cover;
  background-position: center;
}