/* Shared by every Lab design: the fonts and the frosted buttons at the top – the name (back to
   the main site), About, and Lab with its menu of designs and Info – light by default, inverted on
   designs with a dark background. Lab is for computers only */

@font-face {
  font-family: "Suisse Works";
  src: url("/Font/SuisseWorks-Regular.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Suisse Intl";
  src: url("/Font/SuisseIntl-Regular.otf") format("opentype");
  font-display: swap;
}

/* For the menu buttons at the top */
@font-face {
  font-family: "Suisse Intl";
  src: url("/Font/SuisseIntl-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}

:root {
  --gutter: 4px;
  /* The main site's cursor: a small black dot, the same over anything clickable and on every background */
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='4' fill='black'/%3E%3C/svg%3E") 4 4, auto;
  --cursor-clickable: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='4' fill='black'/%3E%3C/svg%3E") 4 4, pointer;
  --caps-color: #121212;
  --text-color: #757575;
}

* {
  box-sizing: border-box;
}

html {
  cursor: var(--cursor);
}

a[href],
button,
.is-pointing {
  cursor: var(--cursor-clickable);
}

.lab-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  padding: var(--gutter);
}

.lab-button {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 0;
  background: rgb(220 220 220 / 50%);
  -webkit-backdrop-filter: blur(20px); /* "40" in Figma – Figma's blur value is twice the CSS one */
  backdrop-filter: blur(20px);
  font: 500 14px/18px "Suisse Intl", sans-serif;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: #121212; /* always dark on the frosted button, whatever the design's own text colour */
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  transition: color 0.6s ease, background-color 0.6s ease; /* designs may switch light/dark */
}

@media (hover: hover) {
  .lab-button[href]:hover,
  button.lab-button:hover {
    background: #00ff59;
    transition: none;
  }
}

/* The design you are on, and Info while its popup is open */
.lab-button.is-active,
.lab-button[aria-expanded="true"] {
  background: #121212;
  color: #eeeeee;
}

/* Lab: the list of designs below it. Closed, only the design you are on shows, right under Lab;
   hovering (or keyboard focus) opens the whole list. The padding keeps the pointer over the menu on
   its way from Lab down to the list */
.lab-menu {
  position: relative;
}

.lab-menu-list {
  position: absolute;
  top: 100%;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-top: 2px;
}

.lab-menu:not(:hover, :focus-within) .lab-menu-list > :not(.is-active) {
  display: none;
}

/* For a moment while lab.js measures the open list */
.is-measuring .lab-menu-list > * {
  display: flex !important;
}

/* The Info popup, beside the menu */
.lab-info {
  width: 300px;
  padding: 10px 36px 10px 10px;
  position: relative;
  background: rgb(220 220 220 / 50%);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  font: 14px/18px "Suisse Works", serif;
  letter-spacing: -0.018em;
  color: #121212;
  -webkit-font-smoothing: antialiased;
}

.lab-info[hidden] {
  display: none;
}

.lab-info p {
  margin: 0 0 18px;
}

.lab-info p:last-of-type {
  margin-bottom: 0;
}

.lab-info-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  font: 500 16px/26px "Suisse Intl", sans-serif;
  color: inherit;
}

/* The inverted buttons, for designs with a dark background: <html class="lab-dark">. The cursor
   stays black */
.lab-dark .lab-button,
.lab-dark .lab-info {
  background: rgb(35 35 35 / 50%);
  color: #eeeeee;
}

@media (hover: hover) {
  .lab-dark .lab-button[href]:hover,
  .lab-dark button.lab-button:hover {
    background: #00ff59;
    color: #121212;
  }
}

.lab-dark .lab-button.is-active,
.lab-dark .lab-button[aria-expanded="true"] {
  background: #eeeeee;
  color: #121212;
}

/* The pill next to the pointer naming the project of the image under it (label.js). Text wraps onto
   more lines within 300px; a word too long for it is cut off at the edge */
.lab-label {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  margin: 0;
  max-width: 300px;
  overflow: hidden;
  padding: 8px 14px;
  border-radius: 18px;
  background: rgb(246 246 246 / 60%);
  box-shadow: inset 0 0 0 1px rgb(213 213 213 / 80%);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  font: 14px/18px "Suisse Works", serif;
  letter-spacing: -0.018em;
  color: #757575;
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.6s ease, box-shadow 0.6s ease, color 0.6s ease;
}

.lab-label.is-shown {
  opacity: 1;
}

/* The project name on its own line, the description below */
.lab-label-title {
  display: block;
  font-family: "Suisse Intl", sans-serif;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #121212;
  transition: color 0.6s ease;
}

.lab-dark .lab-label {
  background: rgb(9 9 9 / 60%);
  box-shadow: inset 0 0 0 1px rgb(42 42 42 / 80%);
  color: #8c8c8c;
}

.lab-dark .lab-label-title {
  color: #ededed;
}