/* BUTTON */



/* BUTTON SETTINGS */
a.btn,
button.btn,
div.btn {
	background-color: var(--primary-button-bg-color);
	color: var(--text-on-button-primary, var(--neutral-50));
}

a.btn:is(:hover, :focus),
button.btn:is(:hover, :focus),
div.btn:is(:hover, :focus) {
	background-color: var(--primary-button-bg-hover-color);
	color: var(--text-on-button-primary-hover, var(--neutral-0));
}
a.btn--terms,
button.btn--terms,
div.btn--terms {
  background-color: var(--terms-button-bg-color, var(--brand-primary-l-2));
  color: var(--text-on-button-primary, var(--neutral-50));
  padding: 5px 10px;
}
a.btn--terms:is(:hover, :focus),
button.btn--terms:is(:hover, :focus),
div.btn--terms:is(:hover, :focus) {
  background-color: var(--terms-button-bg-hover-color, var(--brand-primary));
  color: var(--text-on-button-primary-hover, var(--neutral-0));
}

/* BUTTON CHANGES */
.btn--inverse {
  background-color: var(--neutral-0) !important;
  color: var(--brand-primary) !important;
}

@media (max-width: 1200px) {
	.btn { /* This is expecially for the pillar-buttons on the home page */
		padding: 0.75em 1.5em !important;
	}
}
@media (max-width: 1060px) {
	.btn { /* This is expecially for the pillar-buttons on the home page */
		padding: 0.5em 1em !important;
	}
}


/* efrog buttons */
@property --button-fill {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --button-fill-stop {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --rg-1-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --rg-1-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --rg-2-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 20%;
}

@property --rg-2-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 70%;
}

@property --rg-3-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 70%;
}

@property --rg-3-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 20%;
}

@property --rg-4-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --rg-4-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --rg-5-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --rg-5-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 40%;
}

.gradient-button {
  /*padding: 0.5lh 4ch;*/
  border-radius: 100vw;
  border: 3px solid transparent;
  transition: --button-fill 1s, --button-fill-stop 0.5s;
  animation: gradient-movement 5s alternate infinite ease-in-out;
  animation-delay: calc(sibling-index() * -2000ms);
  background: radial-gradient(
        circle,
        var(--button-fill) var(--button-fill-stop),
        transparent
      )
      padding-box,
    radial-gradient(
        circle 100px at var(--rg-1-x) var(--rg-1-y),
        /*deeppink,*/
		red,
        transparent
      )
      border-box,
    radial-gradient(
        circle 120px at var(--rg-2-x) var(--rg-2-y),
        /*royalblue,*/
		orange,
        transparent
      )
      border-box,
    radial-gradient(
        circle 150px at var(--rg-3-x) var(--rg-3-y),
        /*rebeccapurple,*/
		green,
        transparent
      )
      border-box,
    radial-gradient(
        circle 180px at var(--rg-4-x) var(--rg-4-y),
        /*lime,*/
		purple,
        transparent
      )
      border-box,
	radial-gradient(
        circle 200px at var(--rg-5-x) var(--rg-5-y),
        /*lime,*/
		blue,
        transparent
      )
      border-box;
/*background: radial-gradient(
        circle,
        var(--button-fill) var(--button-fill-stop),
        transparent
      )
      padding-box,
    radial-gradient(
        circle 120px at var(--rg-1-x) var(--rg-1-y),
        /*deeppink,*/
/*		#e72626,
        transparent
      )
      border-box,
    radial-gradient(
        circle 150px at var(--rg-2-x) var(--rg-2-y),
        /*royalblue,*/
/*		#24affa,
        transparent
      )
      border-box,
    radial-gradient(
        circle 160px at var(--rg-3-x) var(--rg-3-y),
        /*rebeccapurple,*/
/*		#fcd42f,
        transparent
      )
      border-box,
    radial-gradient(
        circle 200px at var(--rg-4-x) var(--rg-4-y),
        /*lime,*/
/*		#f75d2a,
        transparent
      )
      border-box;*/
	
  background-position: center, center, bottom right, top left, top right,
    bottom left;

  background-repeat: no-repeat;
}

@keyframes gradient-movement {
  30% {
    --rg-1-x: 70%;
    --rg-1-y: 20%;
  }

  40% {
    --rg-2-x: 120%;
    --rg-2-y: 50%;
  }
  45% {
    --rg-4-x: -10%;
    --rg-4-y: 10%;
  }
  50% {
    --rg-3-x: 50%;
    --rg-3-y: 50%;
  }

  70% {
    --rg-1-x: -10%;
	  --rg-1-y: -60%;
    --rg-2-y: -20%;
  }
  80% {
    --rg-5-x: 30%;
    --rg-5-y: 70%;
  }
}

.gradient-button:hover,
.gradient-button:focus-visible {
  --button-fill-stop: 100%;
  --button-fill: var(--button-fill-hover, black);
}

.gradient-button.bordered {
  --button-fill-stop: 100%;
  --button-fill: black;
	animation-delay: -2000ms;
}

.gradient-button.bordered:is(:hover, :focus-visible) {
  --button-fill-stop: 0%;
  --button-fill: transparent;
}

/*html {
  font-family: system-ui;
  color-scheme: dark;
  font-size: 2rem;
}

body {
  margin: 0;
  min-block-size: 100vb;
  display: grid;
  grid-template-columns: auto auto;
  place-content: center;
  gap: 1rem;
}*/

button {
  font: inherit;
}