/* ЧТО? Этот псих дропнул пачку переменных для какого-то мини-элемента? Вызывайте дурку */

:root {
  --snow-lightblue-button: #7e9dff;
  --snow-flake-color: #c1dcec;
  --snow-flake-index: 200;
  --snow-flake-start: -1.5em;
  --snow-flake-end: 1.5em;
  --snow-flake-button-transition: 0.3s ease;
  --snow-flake-icon-size: 24px;
  --snow-flake-icon-scale: 0.9;
  --snow-flake-button-size: 51px;
  --snow-flake-button-radius: 12px;
  --snow-flake-button-shadow: inset 0px 0px 5px 1px rgb(255 255 255 / 0%);
  --snow-flake-button-hover: inset 0px 0px 5px 1px rgb(255 255 255 / 50%);
  --snow-flake-button-bg: linear-gradient(45deg, #7bb7bd, #4773ff);
}

/* Да-да, я тварь и юзаю в Богом забытой ЛРке утилитарные чит-классы, иди нахуй отсюда, если не нравится */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  border: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  clip-path: inset(100%) !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
}

/* Как давно вы видели чистый и красивый css код? */

.snowfal-icon {
  width: var(--snow-flake-button-size);
  height: var(--snow-flake-button-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--snow-flake-button-bg);
  border-radius: var(--snow-flake-button-radius);
  box-shadow: var(--snow-flake-button-shadow);
  cursor: pointer;
  -webkit-user-drag: none;
  transition: var(--snow-flake-button-transition);
}

/* Фигасе, SLAME даже иконки на переменных захуярил О_о */

.snowfal-icon svg {
  height: var(--snow-flake-icon-size);
  width: var(--snow-flake-icon-size);
  transition: var(--snow-flake-button-transition);
}

.snowfal-icon:hover {
  box-shadow: var(--snow-flake-button-hover);
}

.snowfal-icon:hover svg {
  scale: var(--snow-flake-icon-scale);
}

.snowfal-popup__content {
  padding: 1rem;
}

.snow-toggle {
  display: flex;
  flex-direction: row;
  padding: 0;
  margin: 1rem 0 0 0;
  gap: 0.5rem;
  border: 0;
}

@media (max-width: 768px) {
  .snow-toggle {
    flex-wrap: wrap;
  }
}

/* - А нахуй ты скрыл legend, если в разметке его используешь и снова вызываешь флексом, ваще дурак? 
- А11, закрой свой рот, я лучше знаю, что делаю */

.snow-toggle__label {
  display: flex;
}

/* Да-да, я та самая кнопка, которая должна быть просто пояснением к радиокнопке, Которую мы к хуям скрыли, хыыыыы. Че только не сделаешь ради красоты */

.snow-toggle__item,
.stop-sound {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 1rem;
  border-radius: var(--snow-flake-button-radius);
  background-color: var(--bottom-line-table);
  color: var(--text-custom);
  width: 100%;
  transition: var(--snow-flake-button-transition);
}

.stop-sound {
  width: max-content;
}

@media (max-width: 768px) {
  .stop-sound {
    width: 100%;
  }
}

.stop-sound svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.stop-sound:active,
.stop-sound:focus {
  background-color: var(--snow-lightblue-button);
  color: var(--text-default);
}

/* Да поебать мне вообще, закрой этот код и сходи на хуй */

.snow-toggle__control {
  display: none;
}

.snow-toggle__text {
  color: currentColor;
}

/* ха, БУ! сосал? Не ожидал?  */

.snow-toggle__control:checked + .snow-toggle__item {
  background-color: var(--snow-lightblue-button);
  color: var(--text-default);
}

/* Да блять хватить пиздить мой код */

.snow {
  --animation-name: snowfall;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: var(--snow-flake-index);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

/* Бож, чел, ты такая гниль, я твою жизнь ебал */

.snow__flake {
  position: relative;
  top: var(--snow-flake-start);
  color: var(--snow-flake-color);
  animation-name: var(--animation-name);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
}

/* Не нравится? Иди нахуй отсюда, не для тебя было сделано и не для таких , как ты, всем похуй на твоё мнение */
/* ВСЕМ ПОХУЙ НА ТВОЁ МНЕНИЕ */

@keyframes snowfall {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(calc(100vh + var(--snow-flake-end)));
  }
}

.snowfall-banner {
  max-width: 28rem;
  border-radius: 16px;
  margin-block: 1rem;
  -webkit-user-drag: none;
}

@media (max-width: 768px) {
  .snowfall-banner {
    width: 100%;
  }
}

/* С НОВЫМ ГОДОМ КСТА! */