/* Heights */

.height-10  { height: 10%; }
.height-20  { height: 20%; }
.height-25  { height: 25%; }
.height-30  { height: 30%; }
.height-33  { height: 33.3333333333%; }
.height-40  { height: 40%; }
.height-50  { height: 50%; }
.height-60  { height: 60%; }
.height-66  { height: 66.6666666666%; }
.height-70  { height: 70%; }
.height-75  { height: 75%; }
.height-80  { height: 80%; }
.height-90  { height: 90%; }
.height-100 { height: 100%; }

.height-UI1   { height: var(--spacing-100); }
.height-UI2    { height: var(--spacing-200); }
.height-UI3     { height: var(--spacing-300); }
.height-UI4      { height: var(--spacing-400); }
.height-UI5      { height: var(--spacing-500); }
.height-UI6      { height: var(--spacing-600); }
.height-UI7     { height: var(--spacing-700); }
.height-UI8    { height: var(--spacing-800); }
.height-UI9   { height: var(--spacing-900); }

@media (--breakpoint-1) {
  .bp1-height-10  { height: 10%; }
  .bp1-height-20  { height: 20%; }
  .bp1-height-25  { height: 25%; }
  .bp1-height-30  { height: 30%; }
  .bp1-height-33  { height: 33.3333333333%; }
  .bp1-height-40  { height: 40%; }
  .bp1-height-50  { height: 50%; }
  .bp1-height-60  { height: 60%; }
  .bp1-height-66  { height: 66.6666666666%; }
  .bp1-height-70  { height: 70%; }
  .bp1-height-75  { height: 75%; }
  .bp1-height-80  { height: 80%; }
  .bp1-height-90  { height: 90%; }
  .bp1-height-100 { height: 100%; }

  .bp1-height-UI1   { height: var(--spacing-100); }
  .bp1-height-UI2    { height: var(--spacing-200); }
  .bp1-height-UI3     { height: var(--spacing-300); }
  .bp1-height-UI4      { height: var(--spacing-400); }
  .bp1-height-UI5      { height: var(--spacing-500); }
  .bp1-height-UI6      { height: var(--spacing-600); }
  .bp1-height-UI7     { height: var(--spacing-700); }
  .bp1-height-UI8    { height: var(--spacing-800); }
  .bp1-height-UI9   { height: var(--spacing-900); }
}

@media (--breakpoint-2) {
  .bp2-height-10  { height: 10%; }
  .bp2-height-20  { height: 20%; }
  .bp2-height-25  { height: 25%; }
  .bp2-height-30  { height: 30%; }
  .bp2-height-33  { height: 33.3333333333%; }
  .bp2-height-40  { height: 40%; }
  .bp2-height-50  { height: 50%; }
  .bp2-height-60  { height: 60%; }
  .bp2-height-66  { height: 66.6666666666%; }
  .bp2-height-70  { height: 70%; }
  .bp2-height-75  { height: 75%; }
  .bp2-height-80  { height: 80%; }
  .bp2-height-90  { height: 90%; }
  .bp2-height-100 { height: 100%; }

  .bp2-height-UI1   { height: var(--spacing-100); }
  .bp2-height-UI2    { height: var(--spacing-200); }
  .bp2-height-UI3     { height: var(--spacing-300); }
  .bp2-height-UI4      { height: var(--spacing-400); }
  .bp2-height-UI5      { height: var(--spacing-500); }
  .bp2-height-UI6      { height: var(--spacing-600); }
  .bp2-height-UI7     { height: var(--spacing-700); }
  .bp2-height-UI8    { height: var(--spacing-800); }
  .bp2-height-UI9   { height: var(--spacing-900); }
}

@media (--breakpoint-3) {
  .bp3-height-10  { height: 10%; }
  .bp3-height-20  { height: 20%; }
  .bp3-height-25  { height: 25%; }
  .bp3-height-30  { height: 30%; }
  .bp3-height-33  { height: 33.3333333333%; }
  .bp3-height-40  { height: 40%; }
  .bp3-height-50  { height: 50%; }
  .bp3-height-60  { height: 60%; }
  .bp3-height-66  { height: 66.6666666666%; }
  .bp3-height-70  { height: 70%; }
  .bp3-height-75  { height: 75%; }
  .bp3-height-80  { height: 80%; }
  .bp3-height-90  { height: 90%; }
  .bp3-height-100 { height: 100%; }

  .bp3-height-UI1   { height: var(--spacing-100); }
  .bp3-height-UI2    { height: var(--spacing-200); }
  .bp3-height-UI3     { height: var(--spacing-300); }
  .bp3-height-UI4      { height: var(--spacing-400); }
  .bp3-height-UI5      { height: var(--spacing-500); }
  .bp3-height-UI6      { height: var(--spacing-600); }
  .bp3-height-UI7     { height: var(--spacing-700); }
  .bp3-height-UI8    { height: var(--spacing-800); }
  .bp3-height-UI9   { height: var(--spacing-900); }
}

@media (--breakpoint-4) {
  .bp4-height-10  { height: 10%; }
  .bp4-height-20  { height: 20%; }
  .bp4-height-25  { height: 25%; }
  .bp4-height-30  { height: 30%; }
  .bp4-height-33  { height: 33.3333333333%; }
  .bp4-height-40  { height: 40%; }
  .bp4-height-50  { height: 50%; }
  .bp4-height-60  { height: 60%; }
  .bp4-height-66  { height: 66.6666666666%; }
  .bp4-height-70  { height: 70%; }
  .bp4-height-75  { height: 75%; }
  .bp4-height-80  { height: 80%; }
  .bp4-height-90  { height: 90%; }
  .bp4-height-100 { height: 100%; }

  .bp4-height-UI1   { height: var(--spacing-100); }
  .bp4-height-UI2    { height: var(--spacing-200); }
  .bp4-height-UI3     { height: var(--spacing-300); }
  .bp4-height-UI4      { height: var(--spacing-400); }
  .bp4-height-UI5      { height: var(--spacing-500); }
  .bp4-height-UI6      { height: var(--spacing-600); }
  .bp4-height-UI7     { height: var(--spacing-700); }
  .bp4-height-UI8    { height: var(--spacing-800); }
  .bp4-height-UI9   { height: var(--spacing-900); }
}