@import './colors.scss';
@import './animations.scss';
@import './fonts.scss';

body {
  font-family: 'Lato', sans-serif;
}

.color-examples::after {
  visibility: hidden;
  display: block;
  content: '';
  clear: both;
  height: 0;
}

.color-example {
  float: left;
  display: flex;
  flex-direction: row;
  width: 20em;
  height: 3em;
}

.color-example-name {
  font-family: monospace;
  background-color: #efefef;
  color: black;
  margin-left: 0.5em;
  height: 2em;
  padding: 0.7em 1em 0em 1em;
}

.color-example-box {
  width: 4em;
  height: 2em;
}

.color-example-box-text-contrast {
  background-color: var(--color-text-contrast);
}

.color-example-box-text-gray {
  background-color: var(--color-text-gray);
}

.color-example-box-dark-elements-gray {
  background-color: var(--color-dark-elements-gray);
}

.color-example-box-light-gray {
  background-color: var(--color-light-gray);
}

.color-example-box-background-gray {
  background-color: var(--color-background-gray);
}

.color-example-box-airy-dark-blue {
  background-color: var(--color-airy-dark-blue);
}

.color-example-box-airy-blue {
  background-color: var(--color-airy-blue);
}

.color-example-box-airy-logo-blue {
  background-color: var(--color-airy-logo-blue);
}

.color-example-box-cta {
  background-color: var(--color-airy-blue);
}

.color-example-box-cta-hover {
  background-color: var(--color-airy-blue-hover);
}

.color-example-box-cta-pressed {
  background-color: var(--color-airy-blue-pressed);
}

.color-example-box-background-blue {
  background-color: var(--color-background-blue);
}

.color-example-box-red-alert {
  background-color: var(--color-red-alert);
}

.color-example-box-accent-magenta {
  background-color: var(--color-accent-magenta);
}

.color-example-box-highlight-yellow {
  background-color: var(--color-highlight-yellow);
}

.color-example-box-background-yellow {
  background-color: var(--color-background-yellow);
}

.color-example-box-background-red {
  background-color: var(--color-background-red);
}

.color-example-box-soft-green {
  background-color: var(--color-soft-green);
}
