@import "./palette";
@import "./variables";

html {
  //  Set font-size to 100% to avoid IE oddities
  //  when using rem/em units in body, etc
  font-size: 100%;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  // Using inherit here allows us to change the box-sizing
  // on other components or third-party plugins.
  box-sizing: inherit;
}

body {
  padding: 0;
  margin: 0;
  background-color: $dark-blue-color;
  background-image: linear-gradient(-180deg, #091E39 0, $dark-blue-color 100px);
  background-repeat: no-repeat;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.grow {
  flex: 1;
}

.shrink {
  flex: 0;
}

.scrim {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: $scrim-z-index;
  cursor: default;
}

.inline {
  display: inline;
}

.block {
  display: block;
}

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

.table {
  display: table;
}

.table-cell {
  display: table-cell;
}

.border-box {
  box-sizing: border-box;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap {
  flex-wrap: wrap;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-auto {
  overflow: auto;
}

.clearfix::after,
.clearfix::before {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

.left {
  float: left;
}

.right {
  float: right;
}

.fit {
  max-width: 100%;
}

.max-width-small {
  max-width: $max-width-small;
}

.max-width-medium {
  max-width: $max-width-medium;
}

.max-width-large {
  max-width: $max-width-large;
}

.max-width-xlarge {
  max-width: $max-width-xlarge;
}