/* Design token page */

.design-tokens hr {
  margin: 1.2rem 0;
}
.design-tokens .flx-card {
  margin-bottom: 3.2rem;
}
.design-tokens code {
  background-color: transparent;
  color: #8959a8;
  font-size: 100%;
  padding: 0;
}

/* Design token grid */

@media (min-width: 600px) {
  .design-token-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "key value example";
  }
  .design-token-grid__value {
   padding: 0 1.2rem;
  }
}
.design-token-grid__value {
  grid-area: value;
}
.design-token-grid__value h1 {
  font-size: 1.4rem;
  font-weight: normal;
}
.design-token-grid__key {
  grid-area: key;
}
.design-token-grid__example {
  grid-area: example;
}

/* Design token examples */

[data-path^="palette-white"],
[data-path="palette-storm-06"],
[data-path="palette-dusk-05"],
[data-path^="background-color-button-secondary"],
[data-path="background-color-card"],
[data-path="background-color-modal"],
[data-path="background-color-alert"],
[data-path="background-color-popover"],
[data-path="background-color-table-row-default"],
[data-path="background-color-table-row-selected"],
[data-path="background-color-checkbox-default"] {
  border: 1px solid #e8eaec;
}

[data-path="color-link"],
[data-path="color-link-hover"] {
  text-decoration: underline;
}

.eg-lh {
  border-bottom: 1px solid #e8eaec;
  background-image: linear-gradient(#e8eaec 1px, transparent 1px);
  background-size: 100% 1rem;
}

.eg-bg,
.eg-border,
.eg-border-top {
  min-height: 3rem;
}

.eg-bg,
.eg-border,
.eg-border-top,
.eg-txt,
.eg-head,
.eg-space {
  margin-bottom: 0rem;
}

.eg-bg-reverse,
.eg-bg-shadow {
  background: #687480;
  padding: 0.8rem 1.2rem;
}

.eg-head {
  line-height: 1.25;
}

.eg-space--x-tiny {
  height: 0.4rem;
}

.eg-space--tiny {
  height: 0.8rem;
}

.eg-space--x-small {
  height: 1.2rem;
}

.eg-space--small {
  height: 1.6rem;
}

.eg-space--medium {
  height: 2rem;
}

.eg-space--large {
  height: 2.4rem;
}

.eg-space--x-large {
  height: 3.2rem;
}

.eg-space--xx-large {
  height: 4.8rem;
}

.eg-alert-info:hover {
  color: #2b74df;
}

.eg-alert-success:hover {
  color: #00aa65;
}

.eg-alert-warning:hover {
  color: #806d25;
}

.eg-alert-error:hover {
  color: #ce2554;
}