/* Стеклянная поверхность из макета: фон, градиентная обводка, внутренние блики.
   Подмешивается к элементам других блоков, сама раскладку не задаёт. */
.glass {
  --glass-border: 1px;
  --glass-stroke: linear-gradient(180deg, rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.3));
  position: relative;
  isolation: isolate;
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: var(--glass-border);
  border-radius: inherit;
  background: var(--glass-stroke);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.glass_theme_light {
  background: var(--gradient-light-glass);
  box-shadow: var(--shadow-light-glass);
}

.glass_theme_dark {
  --glass-border: 2px;
  --glass-stroke: var(--gradient-glass-stroke);
  background: var(--color-black);
  color: var(--color-white);
  box-shadow: var(--shadow-glass-inset), var(--shadow-glass-pink), var(--shadow-float);
}

.glass_theme_pink {
  --glass-stroke: var(--gradient-glass-stroke);
  background: var(--gradient-pink);
  color: var(--color-white);
  box-shadow:
    0 16px 12px -15px rgb(211 4 96 / 0.45),
    inset 1.25px 1.25px 8.25px -1.25px rgb(255 255 255 / 0.7),
    inset -1.25px -3.125px 8.75px -2.75px rgb(144 137 246 / 0.6),
    inset 0.625px 0.625px 15px -1.25px var(--color-white),
    inset -4px -4.625px 7.5px -1.25px rgb(255 255 255 / 0.2),
    inset -1.25px -3.125px 8.75px -2.75px rgb(246 188 137 / 0.6);
}

.glass_theme_clear {
  --glass-border: 2px;
  --glass-stroke: var(--gradient-glass-stroke);
  background: radial-gradient(130% 150% at 28% 18%, rgb(255 255 255 / 0.5) 10%, rgb(255 255 255 / 0.05) 55%, rgb(255 255 255 / 0.02) 100%);
  color: var(--color-white);
  box-shadow:
    inset 2.5px 2.5px 16.5px -2.5px rgb(255 255 255 / 0.7),
    inset -2.5px -6.25px 12.5px -5.5px rgb(235 235 235 / 0.6),
    inset 1.25px 1.25px 60px -2.5px rgb(255 255 255 / 0.2),
    inset -8px -9.25px 15px -2.5px rgb(255 255 255 / 0.2),
    0 25px 22px -28px rgb(0 0 0 / 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}