@import '@picocss/pico/css/pico.min.css';

/* Disable scrollbars */

body::-webkit-scrollbar {
  display: none;
}

/* Disable selectable text */

body {
  user-select: none;
}

/* Sticky nav */

body nav {
  position: fixed;
  top: 0px;
  z-index: 10;
  background-color: var(--pico-card-background-color);
  box-shadow: var(--pico-card-box-shadow);
}

/* Small gap between nav and content */

body div.container-fluid {
  margin-top: 4em;
}

/* Smaller margins on shortcut cards */

details {
  border-bottom: none;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

/* Full-width buttons */

button {
  width: 100%;
}

/* Code area */

textarea {
  resize: vertical;
  font-family: monospace;
  overflow-y: hidden;
  min-height: 3em;
}

/* Accents */

.bigger {
  font-size: 1.5em;
  font-weight: bolder;
}

.darkred {
  background-color: darkred;
  border-color: darkred;
}

.darkgreen {
  background-color: darkgreen;
  border-color: darkgreen;
}

.attention {
  color: var(--form-element-invalid-border-color);
  transition: 0.5s !important;
}

#icon {
  height: 1.5em;
  width: 1.5em;
}

#icon-bigger {
  height: 5em;
  width: 5em;
}

/* No dotted underline in tooltips */

[data-tooltip] {
  border-bottom: none !important;
}

/* Minimal 1/4 grid */

.grid-1-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: var(--spacing);
  grid-row-gap: 0px;
  align-items: baseline;
}

.grid-1-4-1 {
  grid-area: 1 / 1 / 2 / 2;
}

.grid-1-4-2 {
  grid-area: 1 / 2 / 2 / 5;
}

/* Minimal 2/2/1 grid */

.grid-2-2-1 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: var(--spacing);
  grid-row-gap: 0px;
  align-items: baseline;
}

.grid-2-2-1-1 {
  grid-area: 1 / 1 / 2 / 3;
}

.grid-2-2-1-2 {
  grid-area: 1 / 3 / 2 / 5;
}

.grid-2-2-1-3 {
  grid-area: 1 / 5 / 2 / 6;
}