html {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-ui-4);
  color: var(--color-ui-1);
}
* {
  box-sizing: border-box;
}
body {
  width: 100%;
  height: 100%;
  background: var(--color-ui-2-50);
}

main{
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 0;
}

.absolute-fullscreen {
  @include absolute-fullscreen();
}

.fullsize {
  @include fullsize();
}

.fullsize-flex {
  @include flex();
  width: 100%;
  height: 100%;
}

.fullheight {
  height: 100%;
}

.fullsize [aria-hidden="true"], [aria-hidden="true"] {
  display: none;
}

.container {
  @include flex();
  height: 100%;
}

.right {
  justify-content: flex-end;
}

.vertical {
  @include flex-column();
}

.horizontal {
  @include flex-row();
}

.horizontal-centered  {
  @extend .horizontal;
  align-items: center;
}

.space-around {
  @include space-around();
}

.stretch {
  @include stretch();
}

.default-padding {
  padding: $default-padding;
}

.default-padding-left {
  padding-left: $default-padding;
}

.default-padding-right {
  padding-right: $default-padding;
}

.default-padding-bottom {
  padding-bottom: $default-padding;
}

.default-margin-right {
  margin-right: $default-padding;
}

.half-margin-right {
  margin-right: $half-padding;
}

.half-margin-bottom {
  margin-bottom: $half-padding;
}

.half-padding {
  padding: $half-padding;
}

.half-padding-left {
  padding-left: $half-padding;
}

.half-padding-right {
  padding-right: $half-padding;
}

.half-padding-top {
  padding-top: $half-padding;
}

.half-padding-bottom {
  padding-bottom: $half-padding;
}

.hidden {
  display: none;
}

.overflow-y{
  @include overflow-scroll(auto, touch)
}