:root {
  --switch-height: 18px;
  --switch-width: 30px;

  --radio-group-size: 18px;
  --radio-group-svg-size: 10px;

  --checkbox-size: 18px;
  --checkbox-svg-size: 10px;

  --table-height: 48px;

  --tab: rgba(var(--hex-natural-white), 0.05);
  --tab-border: rgba(var(--hex-natural-white), 0.05);

  --countdownTimer: rgba(var(--hex-natural-white), 0.1);

  --bank-status-online: rgb(var(--hex-success));
  --bank-status-offline: rgb(var(--hex-danger));
  --bank-status-disturbance: rgb(var(--hex-warning));

  --input: rgba(var(--hex-natural-black), 0.4);
  --input-border: rgba(var(--hex-border), 0.1);
  --input-border-hover: var(--primary-600);

  --switch-checked-translate: calc(100% - 3px);

  --card-foreground: var(--foreground);

  --popover: var(--background-600);
  --popover-foreground: var(--foreground);

  --category-games-menu-bg-default: linear-gradient(
    105.55deg,
    #7e7f81 0.5%,
    rgba(40, 41, 41, 0.8) 40.8%,
    rgba(44, 44, 44, 0.06) 70.74%,
    hsla(200, 1%, 50%, 0.75) 100.19%
  );

  --table-seperator: rgba(var(--hex-natural-white), 0.1);

  --lottery-prize-number: rgba(var(--hex-natural-white), 0.1);
  --bonus-cashback-container: var(--background-500);

  --active-carousel-indicator: var(--primary-500);
  --inactive-carousel-indicator: rgba(var(--hex-natural-white), 0.3);
}

input::selection {
  background-color: oklch(92.2% 0 0);
  color: oklch(20.5% 0 0);
}

.register-button {
  position: relative;
  outline: 1px solid var(--register-border);
  outline-offset: -1px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.register-button .top-text,
.register-button .bottom-text {
  transition: all;
  transition-duration: 300ms;
}

.register-button .bottom-text {
  position: absolute;
  transform: translateY(25px);
}

.register-button:hover .top-text {
  position: absolute;
  transform: translateY(-50px);
}

.register-button:hover .bottom-text {
  position: relative;
  transform: translateY(0);
}

.register-button::before {
  display: block;
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(white 0%, transparent 70%) border-box;
  mix-blend-mode: overlay;
  animation: 4s infinite linear register-shine;
  pointer-events: none;
}

@keyframes register-shine {
  0% {
    transform: translateX(-100%);
    opacity: 1;
  }

  45% {
    transform: translateX(0);
  }

  75% {
    transform: translateX(100%);
  }

  80% {
    opacity: 0;
  }

  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.primary-button,
.secondary-button,
.login-button {
  position: relative;
  z-index: 0;
  backdrop-filter: blur(2px);
}

.primary-button::before {
  background: var(--primary-border);
}

.secondary-button::before {
  background: var(--secondary-border);
}

.login-button::before {
  background: var(--login-border);
}

.bonus-toast-notification::before {
  background: linear-gradient(
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.35)
    )
    border-box;
}

.primary-button::before,
.secondary-button::before,
.login-button::before,
.bonus-toast-notification::before {
  display: block;
  border: solid 1px transparent;
  border-radius: inherit;
  position: absolute;
  z-index: 1;

  mask:
    linear-gradient(white) border-box,
    linear-gradient(white) padding-box;
  mask-position: center, center;
  mask-size:
    100% 100%,
    100% 100%;
  mask-repeat: no-repeat, no-repeat;
  mask-composite: subtract;
}

.bonus-toast-notification {
  background: linear-gradient(rgb(45 83 51), rgb(19 32 21)) border-box;
  position: relative;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee var(--marquee-duration, 10s) linear infinite;
}

.animate-marquee-reverse {
  animation: marquee var(--marquee-duration, 10s) linear infinite reverse;
}

.animate-marquee:hover,
.animate-marquee-reverse:hover {
  animation-play-state: paused;
}

.apk-bg {
  box-shadow: var(--download-apk-shadow);
  background-image: var(--download-apk-background);
}

.deposit_button_main {
  color: var(--deposit-button-main-color);
  transition: transform 0.3s ease;
}
.deposit_button_main::before,
.deposit_button_main::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
  border-radius: inherit;
  box-shadow: var(--deposit-button-main-box-shadow);
}
.deposit_button_main::before {
  background: var(--deposit-button-main-background);
  opacity: 1;
}
.deposit_button_main::after {
  background: var(--deposit-button-main-background-hover);
  opacity: 0;
}
.deposit_button:hover .deposit_button_main {
  transform: translateY(-3px);
}
.deposit_button:hover .deposit_button_main::after {
  opacity: 1;
}
.deposit_button:active .deposit_button_main {
  transform: translateY(1px);
}
.deposit_plus_icon > g > path {
  fill: var(--deposit-button-plus-color);
}
.deposit_plus_icon > g {
  filter: var(--deposit-button-plus-filter-id);
}
.deposit_button_bottom {
  background: var(--deposit-button-bottom-background);
  box-shadow: var(--deposit-button-bottom-box-shadow);
  transition: box-shadow 0.3s ease;
}
.deposit_button:hover .deposit_button_bottom {
  box-shadow: var(--deposit-button-bottom-box-shadow-hover);
}
.deposit_button:active .deposit_button_bottom {
  box-shadow: var(--deposit-button-bottom-box-shadow-active);
}

*:focus {
  outline: none !important;
}

*:focus-visible {
  outline: none !important;
}