.fizz-inline-block {
  display: inline-block;
}

.fizz-is-hidden {
  display: none;
}

.fizz-hide-on-small,
.fizz-hide-on-small.fizz-space-between,
.fizz-hide-on-small[class*="fizz-flex-row"] {
  display: none;
}

.fizz-hide-on-large {
  display: block;
}
.fizz-hide-on-large.fizz-space-between,
.fizz-hide-on-large[class*="fizz-flex-row"] {
  display: flex;
}

@media (min-width: $breakpoint-m) {
  .fizz-hide-on-small {
    display: block;
  }

  .fizz-hide-on-small.fizz-space-between,
  .fizz-hide-on-small[class*="fizz-flex-row"] {
    display: flex;
  }

  .fizz-hide-on-large,
  .fizz-hide-on-large.fizz-space-between,
  .fizz-hide-on-large[class*="fizz-flex-row"] {
    display: none;
  }
}

.fizz-contain {
  object-fit: contain;
}

.fizz-cover {
  object-fit: cover;
}

.fizz-margin-auto {
  margin-left: auto;
  margin-right: auto;
}

.fizz-center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fizz-bordered,
.fizz-bordered-squared {
  border: $border-width-thin solid $color-border-default;
}

.fizz-bordered {
  border-radius: $border-radius-medium;
}

.fizz-border-bottom {
  border-bottom: $border-width-thin solid $color-border-default;
}

.fizz-border-top {
  border-top: $border-width-thin solid $color-border-default;
}

.fizz-border-left {
  border-left: $border-width-thin solid $color-border-default;
}

.fizz-border-right {
  border-right: $border-width-thin solid $color-border-default;
}

.fizz-outline-active {
  outline: 4px solid $color-border-brand-secondary;
}

.fizz-padded-border-top {
  border-top: $border-width-thin solid $color-border-default;
  padding-top: $spacing-16;
}

.fizz-radius-small {
  border-radius: $border-radius-small;
}

.fizz-radius-medium {
  border-radius: $border-radius-medium;
}

.fizz-radius-large {
  border-radius: $border-radius-large;
}

.fizz-radius-xlarge {
  border-radius: $border-radius-xlarge;
}

.fizz-radius-round {
  border-radius: $border-radius-round;
}

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

.fizz-elevation-1 {
  box-shadow: $elevation-1-shadow;
  position: relative;
}

[class*="fizz-aspect"] {
  position: relative;
  height: 0;
}

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

.fizz-aspect-4-3 {
  padding-bottom: 75%;
}

.fizz-aspect-square {
  padding-bottom: 100%;
}

[class*="fizz-aspect"] :first-child {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
}