@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 160deg;
}

/* --- Button Group Wrapper --- */

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  box-sizing: border-box;
}

/* For icons */
.icon-card .button-group {
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
}

/* --- Button Wrapper --- */

.ex-btn-wrapper {
  --angle: 160deg;
  width: fit-content;
  height: 47px;
  padding: 1.5px; /* border */
  border-radius: 100px;
  background: #FFFFFF;
  background: linear-gradient(var(--angle), rgba(255,255,255,1.0), rgba(255,255,255,0.33), rgba(255,255,255,1.0));
  overflow: hidden;
  transition: --angle 0.33s ease-out;
}
.ex-btn-wrapper:hover {
  --angle: 200deg;
  transition: --angle 0.67s ease-out;
}

/* For all cards and icons */
.card      .ex-btn-wrapper,
.icon-card .ex-btn-wrapper {
  height: fit-content;
}
/* For pricing cards */
.cards-pricing .ex-btn-wrapper {
  width: 100%;
}

/* --- Button Anchor --- */

.ex-btn-anchor {
  display: block;
  height: 44px;
  padding: 15px 35px;
  border-radius: 100px;
  background: #15223D; /* for normal dark blue page backgrounds */
  transition: background 0.5s ease-out;
}
.ex-btn-anchor:hover {
  background: #192847;
}

/* For light gradient backgrounds */
.gradient-bg .ex-btn-anchor {
  background: #173881; /* for gradient blue page backgrounds */
}
.gradient-bg .ex-btn-anchor:hover {
  background: #1E408B;
}

/* For all cards and icons */
.card      .ex-btn-anchor,
.icon-card .ex-btn-anchor {
  height: fit-content;
  padding: 12px 26px;
}

/* --- Button Label --- */

.ex-btn-label {
  display: block;
  max-height: 14px;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 4px;
  user-select: none;
}

/* --- Button Styles --- */
/* TODO: revisit and possibly refactor */

/* Standard button elements */
button, input[type="submit"], .button {
  all: unset;
  display: inline-block;
  margin: 0 15px 20px 0;
  padding: 15px 40px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  border: 1px solid white;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

/* Frosted */
.ex-btn-wrapper.clear-frosted {
  padding: 0;
  background: transparent;
  border: 1.5px solid white;
  transition: all 0.2s ease-in-out;
}
button, input[type="submit"], .ex-btn-wrapper.clear-frosted > a {
  background: linear-gradient(133deg, rgb(165 239 255 / 17%) 0%, rgb(110 191 244 / 14%) 22%, rgb(70 144 212 / 0%) 100%);
  -webkit-backdrop-filter: saturate(100%) blur(20px);
  backdrop-filter: saturate(100%) blur(20px);
  transition: all 0.2s ease-in-out;
}
.ex-btn-wrapper.clear-frosted:hover {
  border: 1.5px solid var(--teal);
}
button:hover, input[type="submit"], .ex-btn-wrapper.clear-frosted:hover > a {
  background: transparent;
  color: var(--teal);
}

/* White */
.ex-btn-wrapper.white {
  padding: 0;
  background: transparent;
  border: 1.5px solid white;
}
.ex-btn-wrapper.white > a {
  background: rgba(255,255,255,0.7);
  -webkit-backdrop-filter: saturate(110%) blur(10px);
  backdrop-filter: saturate(110%) blur(10px);
  color: var(--dark-blue);
  transition: all 0.2s ease-in-out;
}
.ex-btn-wrapper.white:hover > a {
  background: rgba(255,255,255,1.0);
  -webkit-backdrop-filter: saturate(110%) blur(10px);
  backdrop-filter: saturate(110%) blur(10px);
}

/* Blue */
.ex-btn-wrapper.blue {
  padding: 0;
  background: transparent;
  border: 1.5px solid white;
}
.ex-btn-wrapper.blue > a {
  background: rgba(20,164,184,0.7);
  -webkit-backdrop-filter: saturate(110%) blur(10px);
  backdrop-filter: saturate(110%) blur(10px);
}
.ex-btn-wrapper.blue:hover > a {
  background: rgba(20,164,184,1.0);
  -webkit-backdrop-filter: saturate(110%) blur(10px);
  backdrop-filter: saturate(110%) blur(10px);
}
.ex-btn-wrapper.blue > a > span {
  color: var(--dark-blue);
}