@layer app {
/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-block;
  padding: 10px var(--btn-pad-x);
  border-radius: var(--radius);
  font-family: var(--font-flap);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  border: 1px solid var(--btn-brd);
  background: var(--btn-bg);
  color: var(--btn-text);
  transition: background 0.12s, box-shadow 0.12s;
}

.btn:hover {
  background: var(--row-hover);
}

.btn-primary {
  background: var(--orange);
  border-color: var(--orange-dim);
  color: #fff;
  box-shadow: 0 0 0 0 var(--orange-glow);
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--orange), #fff 15%);
  box-shadow: 0 2px 12px var(--orange-glow);
}

.btn-primary:active {
  background: var(--orange-dim);
  box-shadow: none;
}

.btn-primary:disabled {
  background: var(--cell-brd);
  border-color: var(--cell-brd);
  color: var(--page-sub);
  box-shadow: none;
  cursor: default;
}

.btn-secondary {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--btn-brd);
}

.btn-green {
  background: var(--green);
  border-color: var(--green-dim);
  color: #fff;
  box-shadow: 0 0 0 0 var(--green-glow);
}

.btn-green:hover {
  background: #5ab878;
  box-shadow: 0 2px 12px var(--green-glow);
}

.btn-green:active {
  background: var(--green-dim);
  box-shadow: none;
}

.btn-small {
  padding: 0 14px;
  height: var(--cell-size);
  line-height: var(--cell-size);
  font-size: 14px;
  background: var(--orange);
  color: #fff;
  border: 1px solid var(--orange-dim);
  border-radius: var(--radius);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
}

.btn-small:hover {
  background: var(--orange-dim);
}

.btn-small:active {
  background: var(--orange-dim);
}

.btn-small:disabled {
  background: var(--cell-brd);
  color: var(--page-sub);
  cursor: default;
}

}