a:has(btn-span):any-link,
button[type="submit"],
.staticrypt-decrypt-button {
  width: 90%;
  min-width: fit-content;
  padding: 16px 5px 10px 5px;
  max-height: fit-content;
  line-height: 1;
  border-radius: var(--br-l);
  border: var(--glass-border);
  text-align: center;
  text-decoration: none;
  font-size: clamp(1.6rem, 3vw, 1.8rem);
  color: var(--off-white) !important;
  background: var(--grad-btn-p);
  box-shadow: 0px 5px 10px 2px
    light-dark(hsla(270, 80%, 37%, 0.9), hsla(0, 0%, 0%, 0.5));
  transform: scale(0.94);
  transition: transform 0.3s ease, box-shadow 0.2s ease, background 0.3s ease;
  will-change: transform, box-shadow;

  user-select: none;

  &:hover,
  &:focus-visible {
    transform: scale(1);
    will-change: transform;
    cursor: pointer;
    background: var(--grad-btn-p-l);
    box-shadow: 0px 15px 19px 2px
      light-dark(hsla(270, 80%, 45%, 0.7), hsla(0, 0%, 0%, 0.5));
  }

  &:active {
    transform: scale(0.95);
    filter: brightness(0.9);
    background: var(--grad-btn-p);
  }
}

a:has(btn-span):any-link {
  display: inline-block;
  margin: 5px;

}

.staticrypt-decrypt-button {
  padding: 12px 5px 5px 5px;
}

btn-span {
  font-weight: bold;
  white-space: nowrap;
  line-height: 1;
  will-change: transform;
  backface-visibility: hidden;
}

html#light
  :is(a:has(btn-span), button[type="submit"], .staticrypt-decrypt-button) {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 50%;
    border-radius: 19px 19px 0 0;

    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0)
    );
    pointer-events: none;
    z-index: 2;
  }
}