$color-tiny: #dbd3d8;
$color-small: #fac748;
$color-medium: #87d68d;
$color-large: #27abd6;
$color-xlarge: #e18335;
$color-2xlarge: #db4c40;
$color-3xlarge: #8d6a9f;
$dotted-border-color: #e5e7e6;

body {
  background: #0f2a3d;
  font-family: 'Public Sans', sans-serif; // Aquila font
  padding: 24px;
}

.docs-inverse-container {
  background: #e5e7e6;
  padding: 24px;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #0f2a3d;
  }
}

// GRID STYLES
.docs-grid-colored-grid {
  @media only screen and (min-width: 0) and (max-width: 319px) {
    background-color: darken($color-tiny, 40%);
  }

  @media only screen and (min-width: 320px) and (max-width: 703px) {
    background-color: darken($color-small, 40%);
  }

  @media only screen and (min-width: 704px) and (max-width: 991px) {
    background-color: darken($color-medium, 40%);
  }

  @media only screen and (min-width: 992px) and (max-width: 1279px) {
    background-color: darken($color-large, 30%);
  }

  @media only screen and (min-width: 1280px) and (max-width: 1471px) {
    background-color: darken($color-xlarge, 30%);
  }

  @media only screen and (min-width: 1472px) and (max-width: 1759px) {
    background-color: darken($color-2xlarge, 40%);
  }

  @media only screen and (min-width: 1760px) {
    background-color: darken($color-3xlarge, 40%);
  }
}

.docs-grid-colored-col {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;

  @media only screen and (min-width: 0) and (max-width: 319px) {
    background-image:
      linear-gradient(to bottom, var(--ui-01) 0%, var(--ui-01) 100%),
      linear-gradient(to bottom, $color-tiny 0%, $color-tiny 100%);
    background-clip: content-box, padding-box;
    outline: 2px dotted $dotted-border-color;
  }

  @media only screen and (min-width: 320px) and (max-width: 703px) {
    background-image:
      linear-gradient(to bottom, var(--ui-01) 0%, var(--ui-01) 100%),
      linear-gradient(to bottom, $color-small 0%, $color-small 100%);
    background-clip: content-box, padding-box;
    outline: 2px dotted $dotted-border-color;
  }

  @media only screen and (min-width: 704px) and (max-width: 991px) {
    background-image:
      linear-gradient(to bottom, var(--ui-01) 0%, var(--ui-01) 100%),
      linear-gradient(to bottom, $color-medium 0%, $color-medium 100%);
    background-clip: content-box, padding-box;
    outline: 2px dotted $dotted-border-color;
  }

  @media only screen and (min-width: 992px) and (max-width: 1279px) {
    background-image:
      linear-gradient(to bottom, var(--ui-01) 0%, var(--ui-01) 100%),
      linear-gradient(to bottom, $color-large 0%, $color-large 100%);
    background-clip: content-box, padding-box;
    outline: 2px dotted $dotted-border-color;
  }

  @media only screen and (min-width: 1280px) and (max-width: 1471px) {
    background-image:
      linear-gradient(to bottom, var(--ui-01) 0%, var(--ui-01) 100%),
      linear-gradient(to bottom, $color-xlarge 0%, $color-xlarge 100%);
    background-clip: content-box, padding-box;
    outline: 2px dotted $dotted-border-color;
  }

  @media only screen and (min-width: 1472px) and (max-width: 1759px) {
    background-image:
      linear-gradient(to bottom, var(--ui-01) 0%, var(--ui-01) 100%),
      linear-gradient(to bottom, $color-2xlarge 0%, $color-2xlarge 100%);
    background-clip: content-box, padding-box;
    outline: 2px dotted $dotted-border-color;
  }

  @media only screen and (min-width: 1760px) {
    background-image:
      linear-gradient(to bottom, var(--ui-01) 0%, var(--ui-01) 100%),
      linear-gradient(to bottom, $color-3xlarge 0%, $color-3xlarge 100%);
    background-clip: content-box, padding-box;
    outline: 2px dotted $dotted-border-color;
  }

  outline-offset: -1px;
}

.docs-grid-colored-offset {
  @media only screen and (min-width: 0) and (max-width: 319px) {
    background: linear-gradient(to right, darken($color-tiny, 20%) 50%, transparent 50%);
  }

  @media only screen and (min-width: 320px) and (max-width: 703px) {
    background: linear-gradient(to right, darken($color-small, 20%) 50%, transparent 50%);
  }

  @media only screen and (min-width: 704px) and (max-width: 991px) {
    background: linear-gradient(to right, darken($color-medium, 20%) 50%, transparent 50%);
  }

  @media only screen and (min-width: 992px) and (max-width: 1279px) {
    background: linear-gradient(to right, darken($color-large, 20%) 50%, transparent 50%);
  }

  @media only screen and (min-width: 1280px) and (max-width: 1471px) {
    background: linear-gradient(to right, darken($color-xlarge, 20%) 50%, transparent 50%);
  }

  @media only screen and (min-width: 1472px) and (max-width: 1759px) {
    background: linear-gradient(to right, darken($color-2xlarge, 20%) 50%, transparent 50%);
  }

  @media only screen and (min-width: 1760px) {
    background: linear-gradient(to right, darken($color-3xlarge, 20%) 50%, transparent 50%);
  }
}

.docs-grid-text-tiny {
  font-weight: 700;
  color: $color-tiny;
}

.docs-grid-text-small {
  font-weight: 700;
  color: $color-small;
}

.docs-grid-text-medium {
  font-weight: 700;
  color: $color-medium;
}

.docs-grid-text-large {
  font-weight: 700;
  color: $color-large;
}

.docs-grid-text-xlarge {
  font-weight: 700;
  color: $color-xlarge;
}

.docs-grid-text-2xlarge {
  font-weight: 700;
  color: $color-2xlarge;
}

.docs-grid-text-3xlarge {
  font-weight: 700;
  color: $color-3xlarge;
}
