@mixin block-round($width) {
  width: $width;
  height: $width;
  display: inline-block;
  border-radius: 50%;
}

@mixin block-responsive($ratio: 100%) {
  padding-top: $ratio;
  display: block;
}

// Invisible, but accessible to screen readers
// Watch out: If you are using this in scrollable containers which
// might overflow into each other, set `position: relative` on a parent
// to make sure your invisible container doesn't appear anywhere outside
// of the parent element.
@mixin block-invisible {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;

  overflow: hidden;
  position: absolute;

  border: none;
  clip: rect(0 0 0 0);
}

@mixin block-size($width, $horizontalSpacing: 0, $verticalSpacing: 0) {
  max-width: $width;
  margin: 0 auto;

  @if $verticalSpacing != 0 or $horizontalSpacing != 0 {
    padding: $verticalSpacing $horizontalSpacing;
  }
}

@mixin block-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin block-fill($width: 100%, $height: 100%) {
  width: $width;
  height: $height;
  position: absolute;
  top: 0;
  left: 0;
}