@import "fonts.css";

:root {
  --blue: #29abe2;
  --cyan: #00ffff;
  --dark-turquoise: #1c9465;
  --dark-gray: #272a30;
  --eerie-black: #1c1e23;
  --terminal-black: #28323f;
  --green: #96ee05;
  --gray: #666666;
  --jet-gray: #303337;
  --original-green: green;
  --original-red: red;
  --original-yellow: yellow;
  --pink: #ff00ff;
  --raisin-black: #202328;
  --red: #fc1452;
  --silver: #999999;
  --turquoise: #02e68f;
  --violet: #af7dff;
  --white: #ffffff;
  --yellow: #ffe752;
}

body {
  font-family: Roboto, Arial, sans-serif;
}

.smooth-scroll {
    scroll-behavior: smooth;
}

pre {
  margin: 0;
}

/**
 * TACHYONS-LIKE CLASSES
 */
.blue {
  color: var(--blue);
}

.cyan {
  color: var(--cyan);
}

.green {
  color: var(--green);
}

.original-red {
  color: var(--original-red);
}

.pink {
  color: var(--pink);
}

.red {
  color: var(--red);
}

.silver {
  color: var(--silver);
}

.turquoise {
  color: var(--turquoise);
}

.violet {
  color: var(--violet);
}

.yellow {
  color: var(--yellow);
}

.bg-dark-gray {
  background-color: var(--dark-gray);
}

.bg-eerie-black {
  background-color: var(--eerie-black);
}

.bg-jet-gray {
  background-color: var(--jet-gray);
}

.bg-original-green {
  background-color: var(--original-green);
}

.bg-original-red {
  background-color: var(--original-red);
}

.bg-original-yellow {
  background-color: var(--original-yellow);
}

.bg-raisin-black {
  background-color: var(--raisin-black);
}

.essential-pragmata-pro {
  font-family: "EssentialPragmataPro", monospace, sans-serif;
}


.pre-wrap {
  white-space: pre-wrap;
}

.sticky {
  position: sticky;
}

.before-rw-arrow::before {
  content: "\2192";
}

.after-rw-arrow::after {
  content: "\2192";
}

.before-dw-arrow::before {
  content: "\2193";
}

.hover-before-white:hover::before {
  color: var(--white);
}

.b--jet-gray {
  border-color: var(--jet-gray);
}

.b--turquoise {
  border-color: var(--turquoise);
}
/* END */

/**
 * BLOCK-LIKE CLASSES
 */
/* Code highlighting */
.build-rule {
  color: var(--green);
}
.fn-name {
  color: var(--blue);
}
.fn-p {
  color: var(--yellow);
}
.fn-arg {
  color: var(--green);
}
.fn-str {
  color: var(--violet);
}
.grammar-string {
  color: var(--yellow);
}
.grammar-syntax {
  color: var(--pink);
}
.grammar-comment {
  color: var(--silver);
}
.grammar-token {
  color: var(--green);
}

/* Codelab */
.codelab-category-beginner {
  border-color: var(--turquoise);
}
.codelab-category-beginner h2 {
  color: var(--turquoise);
}
.codelab-category-intermediate {
  border-color: var(--yellow);
}
.codelab-category-intermediate h2 {
  color: var(--yellow);
}
.codelab-category-advanced {
  border-color: var(--red);
}
.codelab-category-advanced h2 {
  color: var(--red);
}

/* Skip to content */
.skip-to-content {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
}
.skip-to-content:focus {
  background-color: var(--dark-gray);
  border: 0.125rem solid var(--violet);
  border-radius: 0.25rem;
  color: var(--white);
  outline: none;
  padding: 0.5rem;
  position: fixed;
  left: 1rem;
  width: auto;
  height: auto;
  clip: auto;
  z-index: 1;
}

/* Tabs */
.tabs__tablist {
  background-color: var(--dark-gray);
  display: flex;
  margin: 0;
  overflow-x: auto;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.tabs__tab {
  border-bottom: 1px solid var(--turquoise);
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  cursor: pointer;
  padding-bottom: 0.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 0.5rem;
  z-index: 1;
}
.tabs__tab--selected {
  border-bottom: 1px solid var(--raisin-black);
  border-left: 1px solid var(--turquoise);
  border-right: 1px solid var(--turquoise);
  border-top: 1px solid var(--turquoise);
  color: var(--white);
  background-color: var(--raisin-black);
  font-weight: 700;
}
.tabs__tab:focus {
  color: var(--turquoise);
  font-weight: 700;
  outline: 0;
}
.tabs__panels {
  margin-top: -1px;
}
.tabs__panel {
  display: none;
}
.tabs__panel--selected {
  border: 1px solid var(--turquoise);
  display: block;
  overflow-x: auto;
}

/* Table */
.table {
  border-collapse: collapse;
  border-spacing: 0;
}
.table th {
  border-bottom: 1px solid var(--white);
  color: var(--turquoise);
  min-width: 8rem;
  padding: 0.25rem;
  text-align: left;
  text-transform: uppercase;
}
.table td {
  border-bottom: 1px solid var(--gray);
  min-width: 8rem;
  padding: 0.25rem;
}

/* Blinker */
.blinker {
  animation: blinker 1s linear infinite;
}
@keyframes blinker {
  49% {
    background-color: transparent;
  }
  50% {
    background-color: white;
  }
  100% {
    background-color: white;
  }
}

/* Inline code */
code.code {
  border: 1px solid var(--gray);
  border-radius: 0.25rem;
  color: var(--white);
  font-size: 0.75rem;
  padding: 0.125rem 0.25rem;
  vertical-align: middle;
}

code.code-signature {
  display: block;
  background-color: var(--terminal-black);
  border-radius: 0.25rem;
  color: var(--white);
  font-size: 0.75rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
}

/* Code container */
pre.code-container {
  display: flex;
  background-color: var(--terminal-black);
  border-radius: 0.25rem;
  color: var(--white);
  font-size: 0.75rem;
  overflow-x: auto;
}

/* Copy link */
a.copy-link {
  color: var(--cyan);
  text-decoration: none;
}

/* Bulleted list */
ul.bulleted-list > li {
  display: flex;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
ul.bulleted-list > li::before {
  color: var(--turquoise);
  content: "\2022";
}
ul.bulleted-list > li > * {
  margin-left: 0.75rem;
}

/* Titles */
.title-1 {
  color: var(--white);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 2rem;
}
.title-2 {
  color: var(--turquoise);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.25;
}

.title-3 {
  color: var(--turquoise);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.25;
}

/* Pagination */
.pagination {
  display: flex;
  background-color: var(--eerie-black);
  border-top: 0.25rem solid var(--dark-turquoise);
  margin-top: 2rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
}
.pagination__previous {
  display: flex;
  margin-right: auto;
}
.pagination__previous::before {
  content: "\2190";
}
.pagination__previous > * {
  margin-left: 0.5rem;
}
.pagination__next {
  display: flex;
  margin-left: auto;
  text-align: right;
}
.pagination__next::after {
  content: "\2192";
}
.pagination__next > * {
  margin-right: 0.5rem;
}

@media screen and (min-width: 60em) {
  h1.please-build {
    font-size: 800%;
  }
}

.please-build {
  font-size: 350%;
}

.code {
  font-family: "EssentialPragmataPro", monospace, sans-serif;
}

/* Google search */
div.gsc-results-wrapper-overlay {
  background-color: var(--raisin-black);
}

li.search {
  margin-top: 3em;
  width: 70%;
}