/* From Uiverse.io by marcelodolza — adapted for Haze */
@keyframes haze-win-spin {
  to { transform:rotate(360deg); }
}

@keyframes haze-win-rainbow-bg {
  to { background-position:350% 50%,350% 50%; }
}

@keyframes haze-win-reflex {
  to { transform:translateX(0) skew(-24deg); opacity:.55; }
}

.haze-win-area {
  --haze-win-radius:var(--rounding-normal);
  position:relative;
  display:inline-flex;
  align-items:center;
  align-self:center;
  min-height:36px;
  padding:0;
  overflow:visible;
  cursor:pointer;
  user-select:none;
  vertical-align:middle;
  background:transparent;
  border:0;
  border-radius:var(--haze-win-radius);
  outline:none;
  font:inherit;
}

.haze-win-area::after {
  display:inline-block;
  position:absolute;
  bottom:calc(100% + 11px);
  left:50%;
  z-index:20;
  box-sizing:border-box;
  width:max-content;
  min-width:max-content;
  max-width:280px;
  padding:8px 16px;
  font-family:var(--font-geist-mono),ui-monospace,monospace;
  font-size:11px;
  font-weight:400;
  line-height:1.45;
  color:var(--grey-100);
  text-align:center;
  letter-spacing:.01em;
  white-space:nowrap;
  pointer-events:none;
  content:attr(data-tooltip);
  background:
    linear-gradient(180deg,rgba(123,154,255,.1) 0%,transparent 38%),
    linear-gradient(137deg,rgba(17,18,20,.97) 4.87%,rgba(12,13,15,.98) 75.88%);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--rounding-sm);
  box-shadow:
    0 10px 28px rgba(0,0,0,.42),
    0 0 0 1px rgba(123,154,255,.06),
    inset 0 1px 0 rgba(255,255,255,.07);
  opacity:0;
  visibility:hidden;
  transform:translateX(-50%) translateY(5px) scale(.98);
  transition:
    opacity .22s cubic-bezier(.22,1,.36,1),
    transform .22s cubic-bezier(.22,1,.36,1),
    visibility .22s ease;
}

.haze-win-area::before {
  position:absolute;
  bottom:calc(100% + 5px);
  left:50%;
  z-index:21;
  width:7px;
  height:7px;
  pointer-events:none;
  content:"";
  background:rgba(13,14,16,.98);
  border-right:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09);
  opacity:0;
  visibility:hidden;
  transform:translateX(-50%) rotate(45deg);
  transition:
    opacity .22s cubic-bezier(.22,1,.36,1),
    visibility .22s ease;
}

.haze-win-area:hover::after,
.haze-win-area:focus-visible::after {
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0) scale(1);
}

.haze-win-area:hover::before,
.haze-win-area:focus-visible::before {
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) rotate(45deg);
}

.haze-win-wrap {
  position:relative;
  display:flex;
  align-items:stretch;
  min-height:36px;
  overflow:hidden;
  border-radius:calc(var(--haze-win-radius) - 1px);
  box-shadow:
    0 4px 14px rgba(0,0,0,.4),
    inset 0 0 1px 0 #000;
  background:linear-gradient(to bottom,#0a0a0a 82%,#3a3a3a 100%);
  transform:translateY(0);
  transition:transform .35s ease;
}

.haze-win-glass {
  position:absolute;
  inset:0;
  z-index:9;
  overflow:hidden;
  pointer-events:none;
  border-radius:inherit;
  transition:transform .35s ease;
}

.haze-win-glass::before,
.haze-win-glass::after {
  position:absolute;
  inset:0;
  content:"";
  background:rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.03);
  border-left:1px solid rgba(255,255,255,.08);
  transition:transform .35s ease;
}

.haze-win-glass::before {
  transform:skewX(70deg) rotate(347deg) translate(-18px,-22px);
}

.haze-win-glass::after {
  transform:skewX(65deg) rotate(347deg) translate(42px,-6px);
}

.haze-win-reflex {
  position:absolute;
  inset:0;
  z-index:9;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
}

.haze-win-reflex::before {
  position:absolute;
  top:-40%;
  bottom:-40%;
  left:-140%;
  width:120px;
  content:"";
  background:linear-gradient(to right,rgba(168,189,255,.08) 10%,rgba(168,189,255,.35) 55%,rgba(168,189,255,.12) 90%);
  opacity:0;
  transform:translate(180%,0) skew(24deg);
  transition:transform .5s cubic-bezier(.5,0,.3,1),opacity .5s ease;
}

.haze-win-outline {
  position:absolute;
  inset:-1px -1px -2px;
  overflow:hidden;
  filter:blur(.5px);
  border-radius:inherit;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

.haze-win-outline::before {
  position:absolute;
  inset:2px;
  width:48px;
  height:80px;
  margin:auto;
  content:"";
  background:linear-gradient(to right,transparent 0%,rgba(168,189,255,.75) 50%,transparent 100%);
  animation:haze-win-spin 3.5s linear infinite;
}

.haze-win-rainbow {
  position:absolute;
  z-index:8;
  top:50%;
  right:0;
  left:0;
  height:52px;
  --haze-win-stripes:repeating-linear-gradient(100deg,#fff 0%,#fff 7%,transparent 10%,transparent 12%,#fff 16%);
  --haze-win-rainbow:repeating-linear-gradient(100deg,var(--haze-accent) 10%,#5eeabd 18%,var(--haze-accent-soft) 26%,#6888ff 34%);
  background-image:var(--haze-win-stripes),var(--haze-win-rainbow);
  background-position:50% 50%,50% 50%;
  background-size:300%,200%;
  opacity:.35;
  filter:invert(100%);
  mix-blend-mode:overlay;
  mask-image:radial-gradient(ellipse at 50%,#000 35%,transparent 72%);
  pointer-events:none;
}

.haze-win-bg {
  position:absolute;
  inset:2px;
  z-index:1;
  overflow:hidden;
  border-radius:calc(var(--haze-win-radius) - 2px);
}

.haze-win-bg::before {
  position:absolute;
  inset:0;
  z-index:-1;
  content:"";
  filter:blur(3px);
  background:linear-gradient(
    8deg,
    #07080a 0%,
    #0d1020 42%,
    #1a2340 52%,
    #3d5a9e 62%,
    #6888ff 72%,
    #a8bdff 88%
  );
  transition:filter .3s ease;
}

.haze-win-face {
  position:relative;
  z-index:3;
  display:inline-flex;
  gap:var(--spacing-1);
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:var(--spacing-1) var(--spacing-1-5);
  font-family:var(--main-font);
  font-size:14px;
  font-weight:500;
  line-height:16px;
  color:rgba(255,255,255,.88);
  letter-spacing:.2px;
  white-space:nowrap;
  border-radius:calc(var(--haze-win-radius) - 2px);
  box-shadow:
    inset -3px -1px 1px -1px rgba(0,0,0,.75),
    inset 3px -4px 1px -2px rgba(0,0,0,.75),
    inset -1px 1px 2px 2px rgba(255,255,255,.55),
    inset 1px 2px 3px rgba(47,90,140,.55);
  transition:box-shadow .25s ease,color .25s ease;
}

.haze-win-face svg {
  flex-shrink:0;
  width:16px;
  height:16px;
  fill:currentColor;
}

.haze-win-area:hover .haze-win-wrap {
  transform:translateY(-1px);
}

.haze-win-area:hover .haze-win-glass {
  transform:translateX(-3px);
}

.haze-win-area:hover .haze-win-glass::before {
  transform:skewX(70deg) rotate(347deg) translate(-12px,-23px);
}

.haze-win-area:hover .haze-win-glass::after {
  transform:skewX(65deg) rotate(347deg) translate(32px,-6px);
}

.haze-win-area:hover .haze-win-reflex::before {
  animation:haze-win-reflex .55s cubic-bezier(.5,0,.3,1) forwards;
}

.haze-win-area:hover .haze-win-outline {
  opacity:1;
}

.haze-win-area:hover .haze-win-rainbow {
  animation:haze-win-rainbow-bg 40s linear infinite;
}

.haze-win-area:active .haze-win-wrap {
  transform:translateY(0);
}

.haze-win-area:active .haze-win-face {
  box-shadow:
    inset -3px -1px 1px -1px rgba(0,0,0,.75),
    inset 3px -4px 1px -2px rgba(0,0,0,.75),
    inset -1px 1px 2px 2px rgba(255,255,255,.45),
    inset 1px 2px 8px rgba(30,50,100,.65);
}

.haze-win-area:focus-visible {
  outline:2px solid var(--haze-accent-soft);
  outline-offset:3px;
}

.haze-dl-btns .haze-win-area {
  line-height:normal;
}