.root {
  color: var(--text-color);
  font-size: var(--text-size);
  padding: 8px 16px;
  border: 0;
  border-radius: var(--control-radius);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid var(--control-border);
  line-height: 1em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: "transparent";
}

.root:hover {
  border-color: var(--control-border-hover);
  box-shadow: 0 0 20px var(--control-border-hover);
}

.root:focus-visible {
  outline: none;
  border-color: var(--control-border-focused);
}

.large {
  font-size: var(--text-size-large);
}

.small {
  font-size: var(--text-size-tiny);
  padding: 4px 8px;
}

.primary {
  border-color: var(--gray-11);
  font-weight: bold;
}
.primary:hover {
  border-color: var(--gray-12);
  box-shadow: 0 0 30px var(--gray-12);
}

@keyframes blink-border {
  0%, 100% {
    border-color: var(--control-border);
    color: var(--text-color);
    background-color: var(--gray-3);
  }
  20% {
    border-color: var(--orange-9);
    color: var(--orange-12);
    background-color: var(--orange-3);
  }
  40% {
    border-color: var(--yellow-9);
    color: var(--yellow-12);
    background-color: var(--yellow-3);
  }
  60% {
    border-color: var(--green-9);
    color: var(--green-12);
    background-color: var(--green-3);
  }
  80% {
    border-color: var(--purple-9);
    color: var(--purple-12);
    background-color: var(--purple-3);
  }
}

@keyframes blink-border-hover {
  0%, 100% {
    border-color: var(--control-border);
    color: var(--text-color);
    box-shadow: 0 0 40px var(--gray-8);
    background-color: var(--gray-4);
  }
  20% {
    border-color: var(--orange-9);
    color: var(--orange-12);
    box-shadow: 0 0 40px var(--orange-8);
    background-color: var(--orange-4);
  }
  40% {
    border-color: var(--yellow-9);
    color: var(--yellow-12);
    box-shadow: 0 0 40px var(--yellow-8);
    background-color: var(--yellow-4);
  }
  60% {
    border-color: var(--green-9);
    color: var(--green-12);
    box-shadow: 0 0 40px var(--green-8);
    background-color: var(--green-4);
  }
  80% {
    border-color: var(--purple-9);
    color: var(--purple-12);
    box-shadow: 0 0 40px var(--purple-8);
    background-color: var(--purple-4);
  }
}
.superPrimary {
  animation: blink-border 8s infinite;
  text-transform: uppercase;
}
.superPrimary:hover {
  animation: blink-border-hover 8s infinite;
}

.clear {
  border-color: transparent;
}