/**
 * @tokens Spacing
 * @presenter Spacing
 */

 :root {
  --spacing-base: 16px;
  --spacing-xxs: calc(var(--spacing-base) / 8);
  --spacing-xs: calc(var(--spacing-base) / 4);
  --spacing-s: calc(var(--spacing-base) / 2);
  --spacing-m: var(--spacing-base);
  --spacing-l: calc(var(--spacing-base) * 2);
  --spacing-xl: calc(var(--spacing-base) * 4);
}

.inset {
  padding: var(--spacing-base);
}

.inset-s {
  padding: var(--spacing-s);
}

.inset-m {
  padding: var(--spacing-m);
}

.inset-l {
  padding: var(--spacing-l);
}

.inset-xl {
  padding: var(--spacing-xl);
}

.inset-sqsh-s {
  padding: var(--spacing-xs) var(--spacing-s);
}

.inset-sqsh-m {
  padding: var(--spacing-s) var(--spacing-m);
}

.inset-sqsh-l {
  padding: var(--spacing-m) var(--spacing-l);
}

.stack {
  margin-bottom: var(--spacing-base);
}

.stack-s {
  margin-bottom: var(--spacing-s);
}

.stack-m {
  margin-bottom: var(--spacing-m);
}

.stack-l {
  margin-bottom: var(--spacing-l);
}

.stack-xl {
  margin-bottom: var(--spacing-xl);
}

.inline {
  margin-right: var(--spacing-base);
}

.inline-s {
  margin-right: var(--spacing-s);
}

.inline-m {
  margin-right: var(--spacing-m);
}

.inline-l {
  margin-right: var(--spacing-l);
}

.inline-xl {
  margin-right: var(--spacing-xl);
}

@media (min-width: 768px) {
  .inset-s--tablet-up {
    padding: var(--spacing-s);
  }
  
  .inset-m--tablet-up {
    padding: var(--spacing-m);
  }
  
  .inset-l--tablet-up {
    padding: var(--spacing-l);
  }
  
  .inset-xl--tablet-up {
    padding: var(--spacing-xl);
  }
  
  .stack-s--tablet-up {
    margin-bottom: var(--spacing-s);
  }
  
  .stack-m--tablet-up {
    margin-bottom: var(--spacing-m);
  }
  
  .stack-l--tablet-up {
    margin-bottom: var(--spacing-l);
  }
  
  .stack-xl--tablet-up {
    margin-bottom: var(--spacing-xl);
  }
  
  .inline-s--tablet-up {
    margin-right: var(--spacing-s);
  }
  
  .inline-m--tablet-up {
    margin-right: var(--spacing-m);
  }
  
  .inline-l--tablet-up {
    margin-right: var(--spacing-l);
  }
  
  .inline-xl--tablet-up {
    margin-right: var(--spacing-xl);
  }

  .no-stack--tablet-up {
    margin-bottom: 0;
  }

  .no-inline--tablet-up {
    margin-right: 0;
  }
}

@media (min-width: 1025px) {
  .inset-s--desktop-up {
    padding: var(--spacing-s);
  }
  
  .inset-m--desktop-up {
    padding: var(--spacing-m);
  }
  
  .inset-l--desktop-up {
    padding: var(--spacing-l);
  }
  
  .inset-xl--desktop-up {
    padding: var(--spacing-xl);
  }
  
  .stack-s--desktop-up {
    margin-bottom: var(--spacing-s);
  }
  
  .stack-m--desktop-up {
    margin-bottom: var(--spacing-m);
  }
  
  .stack-l--desktop-up {
    margin-bottom: var(--spacing-l);
  }
  
  .stack-xl--desktop-up {
    margin-bottom: var(--spacing-xl);
  }
  
  .inline-s--desktop-up {
    margin-right: var(--spacing-s);
  }
  
  .inline-m--desktop-up {
    margin-right: var(--spacing-m);
  }
  
  .inline-l--desktop-up {
    margin-right: var(--spacing-l);
  }
  
  .inline-xl--desktop-up {
    margin-right: var(--spacing-xl);
  }

  .no-stack--desktop-up {
    margin-bottom: 0;
  }

  .no-inline--desktop-up {
    margin-right: 0;
  }
}

.is-fullheight {
  height: 100%;
}

.is-fullwidth {
  width: 100%; 
}

.is-horizontal {
  display: flex;
}

.fully-centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

.is-horizontal.is-centered {
  justify-content: center;
}

.is-vertical {
  display: flex;
  flex-direction: column;
}

.is-vertical.is-centered {
  align-items: center;
}

.is-vertical > .is-expanded,
.is-vertical--mobile > .is-expanded,
.is-horizontal > .is-expanded,
.is-horizontal--tablet-up > .is-expanded {
  flex: 1;
}

.justify-between {
  justify-content: space-between;
}

@media screen and (max-width: 600px) {
  .is-vertical--mobile {
    display: flex;
    flex-direction: column;
  }
}

@media screen and (min-width: 610px) {
  .is-horizontal--tablet-up {
    display: flex; 
  }
}