/**
 * TOC
 * - Global
 * - Layout
 * - Bootstrap
 */

/* ----------------------------------------------------------------------------------------------------------- Global */

:root {
  --cc-color-deg: 0;
  --cc-color-text: #000;
}

/* ----------------------------------------------------------------------------------------------------------- Layout */

.list-group-item {
  background: rgba(255, 255, 255, 0.1);
}

.list-group-item:hover,
.list-group-item:active {
  background: inherit;
}

.cc-list {
  align-items: stretch;
  position: relative;
}

.cc-tile {
  color: var(--cc-color-text);
  background: hsla(var(--cc-color-deg), 25%, 97%, 1);
  text-decoration: none;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 1rem;
  border-radius: 0.1rem;
  transition: background 5s, scale 30s;
  transition-timing-function: cubic-bezier(0, 1.25, 0.75, 1.25);
  scale: 0.99;
  z-index: 1;
}

.cc-tile:hover {
  background: #dbe0f6;
  background: hsla(var(--cc-color-deg), 60%, 75%, 1);
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 1rem 0 hsla(var(--cc-color-deg), 25%, 75%, 0.5);
  scale: 1.1;
  z-index: 2 !important;
}

.cc-tile.--1 {
  filter: saturate(2) contrast(0.8);
}

.cc-tile.--2 {
  filter: saturate(1.5) contrast(0.9);
}

.cc-tile.--3 {
  color: color-mix(in srgb, var(--cc-color-text) 40%, white);
  filter: brightness(1.01);
}

/* -------------------------------------------------------------------------------------------------------- Bootstrap */

.cc-link {
  color: #3fcbda;
}

.cc-link:hover {
  color: #55d8e7;
}

.cc-link:active {
  color: #0dcce1;
}

.btn-primary {
  --bs-btn-bg: #3fcbda;
  --bs-btn-border-color: #3fcbda;
  --bs-btn-hover-bg: #55d8e7;
  --bs-btn-hover-border-color: #55d8e7;
  --bs-btn-active-bg: #0dcce1;
  --bs-btn-active-border-color: #0dcce1;
  transition: scale 0.2s;
}

.btn-primary:hover {
  scale: 1.1;
}

.cc-alert {
  background: #f4f0eb;
}