/**
 * Codespud design system
 */

:root {
  --base-color: #0f75ae;
  --app-bg-color: #88d2fc;
  --app-text-color: #5a5a5a;
  --container-color: #fafbfc;
  --shadow-style: 0 4px 8px rgba(15, 117, 174, 0.2), 0 8px 16px rgba(15, 117, 174, 0.2);
  --dark-inset-shadow: rgba(106, 115, 123, 0.25);
  --light-inset-shadow: rgba(255, 255, 255, 0.4);
  --clay-box-shadow: rgba(106, 115, 123, 0.55);
  --clay-background-color: #f1f2f3;
  --clay-fg-color: #000;
}


.clay {

  background-color: var(--clay-background-color);
  /*box-shadow: 8px 8px 16px 0 var(--clay-box-shadow), inset -8px -8px 12px 0 var(--dark-inset-shadow), inset 8px 8px 12px 0 var(--light-inset-shadow);
  backdrop-filter: blur(2px) saturate(50%);*/
  backdrop-filter: blur(2px) saturate(100%);
  box-shadow: 4px 4px 16px rgba(255,255,255,0.2) inset,
    -1px -1px 0 rgba(0,0,0,0.2) inset,
    0 0 1px 0.25px rgba(255,255,255,0.5) inset,
    12px 12px 48px rgba(0,0,0,0.5);
  /* Light inset shadow */
  color: var(--clay-fg-color);
  border: 0;
}

.clay.btn {
  padding: 0.7rem 0.8rem;
}
.clay.btn:focus:not(:focus-visible) {
  outline: none;
}
.clay.btn:active, .clay.btn.clicked {
  box-shadow: 2px 2px 4px 0 var(--clay-box-shadow), inset -8px -8px 12px 0 var(--light-inset-shadow), inset 8px 8px 12px 0 var(--dark-inset-shadow);
  /* Light inset shadow */
}

.clay.btn-primary {
  --dark-inset-shadow: rgba(0, 0, 0, 0.25);
  --light-inset-shadow: rgba(194, 230, 250, 0.4);
  --clay-box-shadow: rgba(0, 0, 0, 0.55);
  --clay-background-color: #0f75ae;
  --clay-fg-color: #f1f2f3;
}

.clay.btn-secondary {
  --dark-inset-shadow: rgba(3, 84, 130, 0.25);
  --light-inset-shadow: rgba(255, 255, 255, 0.4);
  --clay-box-shadow: rgba(3, 84, 130, 0.55);
  --clay-background-color: #88d2fc;
  --clay-fg-color: #f1f2f3;
}

.clay.btn-group {
  --dark-inset-shadow: rgba(128, 128, 128, 0.25);
  --light-inset-shadow: rgba(255, 255, 255, 0.4);
  --clay-box-shadow: rgba(128, 128, 128, 0.55);
  --clay-background-color: #fff;
  --clay-fg-color: #f1f2f3;
  padding: 1rem;
  border-radius: 1rem;
}

.clay.btn-icon-only.btn:hover {
  background-color: var(--clay-background-color);
}

.btn + .btn {
  margin-left: 0.5rem;
}

.clay.buttons {
  --dark-inset-shadow: rgba(128, 128, 128, 0.25);
  --light-inset-shadow: rgba(255, 255, 255, 0.4);
  --clay-box-shadow: rgba(128, 128, 128, 0.55);
  --clay-background-color: #fff;
  --clay-fg-color: #000;
}

.widget {
  width: max(90%, 500px);
}