@import "./checkbox.css";
@import "./input.css";
@import "./popover.css";

:root {
  --primary: #19bc8d;
  --primaryLight: color-mix(in srgb, var(--primary) 38%, transparent);
  --primaryWhite: color-mix(in srgb, var(--primary) 38%, #ffffff);
  --primaryLighter: color-mix(in srgb, var(--primary) 15%, transparent);
  --secondary: #049f73;
  --tertiary: #0B5641;
}

html {
  background: #25262a;
  color: #ffffff;
}

* {
  line-height: 1.2 !important;
}
.border-gradient {
  border: 1px solid transparent;
  background:
    linear-gradient(#25262a4a, #25262aa8) padding-box,
    linear-gradient(330deg, #32323666, #4b4b4b) border-box;
}

.border-gradient-transparent {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(2px);
  color: white;
  border-radius: var(--radius);
  overflow: hidden;
}
.border-gradient-transparent::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0px;

  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(185deg, #4b4b4b7d 40%, #b1b1b199);
  -webkit-mask:
    linear-gradient(#25262a 0 0) content-box,
    linear-gradient(#25262a 0 0);
  mask:
    linear-gradient(#25262a 0 0) content-box,
    linear-gradient(#25262a 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
@media (min-width: 769px) {
  .footer-border-gradient-transparent {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(2px);
    color: white;
    border-radius: 32px;
  }
  .footer-border-gradient-transparent::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0px;

    border-radius: 32px;
    padding: 1px;
    background: linear-gradient(185deg, #4b4b4b7d 40%, #b1b1b199);
    -webkit-mask:
      linear-gradient(#25262a 0 0) content-box,
      linear-gradient(#25262a 0 0);
    mask:
      linear-gradient(#25262a 0 0) content-box,
      linear-gradient(#25262a 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}