:root {
  /**
   * Buttons
   */
  --button-row-horizontal-gap: 1rem;
  --button-row-vertical-gap: 1.5rem;
  --btn-width: auto;
  --button-py: var(--number-space-2);
  --button-py-sm: 2px;
  --button-py-lg: 14px;
  --button-px: var(--number-space-3);
  --button-px-sm: var(--number-space-2);
  --button-px-lg: var(--number-space-4);
  --button-border-radius: var(--number-corner-1);
  --btn-primary-background: var(--color-key-primary);
  --btn-primary-background-hover: var(--color-key-variant-10);
  --btn-primary-color: var(--color-static-on-background-light-primary);
  --btn-primary-color-hover: var(--btn-primary-color);
  --btn-outline-primary-color: var(--color-key-primary);
  --btn-outline-primary-color-hover: var(--color-key-primary);
  --btn-outline-primary-border: var(--color-key-primary);
  --btn-outline-primary-border-hover: var(--color-key-variant-10);
  --btn-secondary-background: var(--color-static-background-light-variant-10);
  --btn-secondary-background-hover: var(--color-static-background-light-variant-20);
  --btn-secondary-color: var(---color-static-on-background-light-primary);
  --btn-secondary-color-hover: var(--btn-secondary-color);
  --btn-outline-secondary-color: var(--color-static-on-background-light-primary);
  --btn-outline-secondary-color-hover: var(--btn-outline-secondary-color);
  --btn-outline-secondary-border: var(--color-static-on-background-light-primary);
  --btn-outline-secondary-border-hover: var(--color-static-on-background-light-neutral);
  --button-hover-background: var(--color-on-background-light);
  --button-font-size: var(--font-size-default);
  --button-font-size-sm: var(--font-size-small);
  --button-font-size-lg: var(--font-size-big);
  --button-letter-spacing: auto;
  --button-border-width: 1px;
}

.btn-row {
  display: flex;
  place-items: center;
}
.btn-row__center {
  place-content: center;
}
.btn-row__end {
  place-content: flex-end;
}

.btn-wrapper,
.btn-wrapper-vertical {
  display: flex;
  flex-wrap: wrap;
  gap: var(--button-row-horizontal-gap);
}
.btn-wrapper--small,
.btn-wrapper-vertical--small {
  --button-row-horizontal-gap: 0.5rem;
}
.btn-wrapper__full-width,
.btn-wrapper-vertical__full-width {
  --btn-width: 100%;
}
.btn-wrapper > [type=button].btn,
.btn-wrapper-vertical > [type=button].btn {
  align-self: flex-start;
}

.btn-wrapper-vertical {
  flex-direction: column;
  gap: var(--button-row-vertical-gap);
}

[type=button] {
  display: inline-block;
}

a.btn,
button.btn,
[type=button].btn,
[type=submit].btn,
[type=reset].btn {
  cursor: pointer;
}
a.btn.btn-primary:hover,
button.btn.btn-primary:hover,
[type=button].btn.btn-primary:hover,
[type=submit].btn.btn-primary:hover,
[type=reset].btn.btn-primary:hover {
  background: var(--btn-primary-background-hover);
  color: var(--btn-primary-color-hover);
}
a.btn.btn-secondary:hover,
button.btn.btn-secondary:hover,
[type=button].btn.btn-secondary:hover,
[type=submit].btn.btn-secondary:hover,
[type=reset].btn.btn-secondary:hover {
  background: var(--btn-secondary-background-hover);
  color: var(--btn-secondary-color-hover);
}
a.btn.btn-outline.btn-primary:hover,
button.btn.btn-outline.btn-primary:hover,
[type=button].btn.btn-outline.btn-primary:hover,
[type=submit].btn.btn-outline.btn-primary:hover,
[type=reset].btn.btn-outline.btn-primary:hover {
  border-color: var(--btn-outline-primary-border-hover);
  background: transparent;
  color: var(--btn-outline-primary-color-hover);
}
a.btn.btn-outline.btn-secondary:hover,
button.btn.btn-outline.btn-secondary:hover,
[type=button].btn.btn-outline.btn-secondary:hover,
[type=submit].btn.btn-outline.btn-secondary:hover,
[type=reset].btn.btn-outline.btn-secondary:hover {
  border-color: var(--btn-outline-secondary-border-hover);
  background: transparent;
  color: var(--btn-outline-secondary-color-hover);
}

.btn {
  width: var(--btn-width);
  padding: var(--button-py) var(--button-px);
  border: var(--button-border-width) solid transparent;
  border-radius: var(--button-border-radius);
  background: transparent;
  font-size: var(--button-font-size);
  font-family: var(--font-family-regular);
  letter-spacing: var(--button-letter-spacing);
  text-align: center;
  transition: var(--transition-fast) all;
}
.btn.btn-primary {
  background: var(--btn-primary-background);
  color: var(--btn-primary-color);
}
.btn.btn-secondary {
  background: var(--btn-secondary-background);
  color: var(--btn-secondary-color);
}
.btn.btn-outline {
  border-width: var(--button-border-width);
  border-style: solid;
  background: transparent;
}
.btn.btn-outline.btn-primary {
  border-color: var(--btn-outline-primary-border);
  color: var(--btn-outline-primary-color);
}
.btn.btn-outline.btn-secondary {
  border-color: var(--btn-outline-secondary-border);
  color: var(--btn-outline-secondary-color);
}
.btn.btn-sm {
  --button-py: var(--button-py-sm);
  --button-px: var(--button-px-sm);
  --button-font-size: var(--button-font-size-sm);
  padding-top: 0px;
}
.btn.btn-lg {
  --button-py: var(--button-py-lg);
  --button-px: var(--button-px-lg);
  --button-font-size: var(--button-font-size-lg);
  font-family: var(--font-family-bold);
}
.btn:focus:not(:focus-visible) {
  outline: none;
}
.btn:focus-visible:not(:hover) {
  outline: var(--focus-default);
  outline-offset: var(--focus-offset);
  transition: unset;
}

.social-buttons .image-wrapper svg {
  width: 50px;
}
.social-buttons .image-wrapper svg:hover g,
.social-buttons .image-wrapper svg:hover path,
.social-buttons .image-wrapper svg:hover ellipse {
  fill: var(--color-secondary);
}
@media (min-width: 576px) {
  .social-buttons .image-wrapper {
    height: auto;
  }
}

:root {
  /**
   * Icons
   */
  --icon-w: 3rem;
  --icon-w-xs: 2.25rem;
  --icon-w-sm: 2.5rem;
  --icon-w-lg: 4rem;
  --icon-p: 0.625rem;
  --icon-p-xs: 0.5rem;
  --icon-p-sm: 0.5rem;
  --icon-p-lg: 1rem;
  --icon-fill: var(--color-static-on-background-light-primary);
  --icon-fill-active: var(--color-key-primary);
  --icon-fill-toggle: var(--color-static-background-light-neutral);
  --icon-background: transparent;
  --icon-background-toggle-hover: var(--color-static-background-light-variant-10);
  --icon-background-toggle-active: transparent;
  --icon-background-toggle-on-color: var(--color-static-background-light-primary);
  --icon-border-color: transparent;
}

.icon-round {
  display: flex;
  align-self: flex-start;
  aspect-ratio: 1/1;
  width: var(--icon-w);
  height: var(--icon-w);
  padding: var(--icon-p);
  padding-top: calc(var(--icon-p) + 2px);
  border: 1px solid var(--icon-border-color);
  border-radius: var(--number-corner-8);
  background-color: var(--icon-background);
}
.icon-round--on-color {
  --icon-fill-toggle: #00000033;
  --icon-background: transparent;
  --icon-background-toggle-hover: transparent;
  --icon-background-toggle-active: transparent;
  --icon-background-toggle-on-color: transparent;
}
.icon-round__bg-primary {
  --icon-background: var(--color-key-primary);
}
.icon-round--active {
  --icon-fill: var(--icon-fill-active);
}
.icon-round-2xs {
  --icon-w: unset;
  --icon-p: 1rem;
}
.icon-round-xs {
  --icon-w: var(--icon-w-xs);
  --icon-p: var(--icon-p-xs);
}
.icon-round-sm {
  --icon-w: var(--icon-w-sm);
  --icon-p: var(--icon-p-sm);
}
.icon-round-lg {
  --icon-w: var(--icon-w-lg);
  --icon-p: var(--icon-p-lg);
}
.icon-round-toggle {
  --icon-fill: var(--icon-fill-toggle);
}
.icon-round-toggle:hover {
  --icon-background: var(--icon-background-toggle-hover);
}
.icon-round-toggle--active {
  --icon-fill: var(--icon-fill-active);
  --icon-background: var(--icon-background-toggle-active);
}
.icon-round-toggle--active:hover {
  --icon-background: var(--icon-background-toggle-active);
}
.icon-round-toggle--gray {
  --icon-fill: unset;
  --icon-background: var(--color-static-background-light-variant-10);
}
.icon-round-toggle--gray:hover {
  --icon-background: var(--icon-background-toggle-active);
}
.icon-round > svg {
  width: 100%;
  height: 100%;
}
.icon-round > svg path {
  fill: var(--icon-fill);
}

/**
 * Toggle wrapper component that includes icon button and text
 */
.toggle-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  /**
   * Hide the input visually but keep it accessible for screen readers
   */
  /**
   * Text that appears next to the toggle button
   */
  /**
   * Apply the enabled class when checkbox is checked
   */
  /**
   * Apply the non-enabled state when checkbox is unchecked
   */
}
.toggle-wrapper .toggle-control {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
.toggle-wrapper .toggle-text {
  margin-left: var(--number-space-2);
  user-select: none;
}
.toggle-wrapper .toggle-control:checked ~ .has-icon-animation.has-icon-animation--color {
  --icon-fill: var(--icon-fill-active);
  --icon-background: var(--icon-background-toggle-active);
}
.toggle-wrapper .toggle-control:checked ~ .has-icon-animation .icon-animation--on {
  transform: scale(1);
  opacity: 1;
}
.toggle-wrapper .toggle-control:checked ~ .has-icon-animation .icon-animation--off {
  transform: scale(0.6);
  opacity: 0;
}
.toggle-wrapper .toggle-control:not(:checked) ~ .has-icon-animation .icon-animation--off {
  transform: scale(1);
  opacity: 1;
}
.toggle-wrapper .toggle-control:not(:checked) ~ .has-icon-animation .icon-animation--on {
  transform: scale(0.6);
  opacity: 0;
}
.toggle-wrapper .toggle-control:focus:not(:focus-visible) + div {
  outline: none;
}
.toggle-wrapper .toggle-control:focus-visible:not(:hover) + div {
  outline: var(--focus-default);
  outline-offset: var(--focus-offset);
  transition: unset;
}

/**
* Existing icon animation styles
*/
.has-icon-animation {
  position: relative;
}
.has-icon-animation .icon-animation--on, .has-icon-animation .icon-animation--off {
  position: absolute;
  top: calc(var(--icon-p) + 1px);
  left: var(--icon-p);
  width: calc(100% - var(--icon-p) * 2);
  height: calc(100% - var(--icon-p) * 2);
  transform: scale(0.6);
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}