/* Bubble Button */
.bubble-button {
  --bubble-btn-bg: var(--bubble-btn-primary-bg);
  --bubble-btn-bg-hover: var(--bubble-btn-primary-bg-hover);
  --bubble-btn-bg-active: var(--bubble-btn-primary-bg-active);
  --bubble-btn-text: var(--bubble-btn-primary-text);
  --bubble-btn-text-hover: var(--bubble-btn-primary-text-hover, var(--bubble-btn-primary-text));
  --bubble-btn-focus-ring-inner: var(--bubble-btn-primary-focus-inner);
  --bubble-btn-focus-ring-outer: var(--bubble-btn-primary-focus-outer);
  --bubble-btn-height: var(--bubble-btn-size-medium);
  --bubble-btn-padding-x: var(--bubble-btn-padding-x-medium);
  --bubble-btn-bubble-size: var(--bubble-btn-bubble-size-medium);
  display: inline-flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
  text-decoration: none;
  border: none;
  background: transparent;
  padding: 0;
  font-family: var(--font-family-base);
  color: var(--bubble-btn-text);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: -0.02em;
  line-height: 1;
  transition: transform 0.2s ease;
  appearance: none;
  --bubble-btn-disabled-bg: var(--btn-disabled-bg);
  --bubble-btn-disabled-text: var(--btn-disabled-text);
}


.bubble-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bubble-btn-focus-ring-inner),
    0 0 0 5px var(--bubble-btn-focus-ring-outer);
  border-radius: 999px;
}

.bubble-button:disabled,
.bubble-button[aria-disabled='true'] {
  cursor: not-allowed;
  transform: none;
}

.bubble-button-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: var(--bubble-btn-bg);
  min-height: var(--bubble-btn-height);
  padding-inline: var(--bubble-btn-padding-x);
  transition:
    background-color 0.2s ease;
  letter-spacing: inherit;
  line-height: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.bubble-button:hover:not(:disabled):not([aria-disabled='true']) .bubble-button-label {
  background-color: var(--bubble-btn-bg-hover);
}

.bubble-button:active:not(:disabled):not([aria-disabled='true']) .bubble-button-label {
  background-color: var(--bubble-btn-bg-active);
}

.bubble-button-bubble {
  height: var(--bubble-btn-bubble-size);
  width: var(--bubble-btn-bubble-size);
  border-radius: 999px;
  background-color: var(--bubble-btn-bg);
  color: var(--bubble-btn-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
  flex-shrink: 0;
}

.bubble-button:disabled .bubble-button-label,
.bubble-button[aria-disabled='true'] .bubble-button-label,
.bubble-button:disabled .bubble-button-bubble,
.bubble-button[aria-disabled='true'] .bubble-button-bubble {
  background-color: var(--bubble-btn-disabled-bg);
  color: var(--bubble-btn-disabled-text);
}

.bubble-button:hover:not(:disabled):not([aria-disabled='true']) .bubble-button-bubble {
  background-color: var(--bubble-btn-bg-hover);
}

.bubble-button:active:not(:disabled):not([aria-disabled='true']) .bubble-button-bubble {
  background-color: var(--bubble-btn-bg-active);
}

.bubble-button-bubble svg {
  width: 20px;
  height: 20px;
  display: block;
  transform: rotate(0deg);
  transform-box: view-box;
  transform-origin: center;
  transition: transform 0.2s ease-in-out;
  will-change: transform;
}

.bubble-button:hover:not(:disabled):not([aria-disabled='true']) .bubble-button-bubble svg {
  transform: rotate(22.5deg);
}

.bubble-button.button--primary {
  --bubble-btn-bg: var(--bubble-btn-primary-bg);
  --bubble-btn-bg-hover: var(--bubble-btn-primary-bg-hover);
  --bubble-btn-bg-active: var(--bubble-btn-primary-bg-active);
  --bubble-btn-text: var(--bubble-btn-primary-text);
  --bubble-btn-text-hover: var(--bubble-btn-primary-text-hover, var(--bubble-btn-primary-text));
  --bubble-btn-focus-ring-inner: var(--bubble-btn-primary-focus-inner);
  --bubble-btn-focus-ring-outer: var(--bubble-btn-primary-focus-outer);
}

.bubble-button.button--primary-light {
  --bubble-btn-bg: var(--bubble-btn-primary-light-bg);
  --bubble-btn-bg-hover: var(--bubble-btn-primary-light-bg-hover);
  --bubble-btn-bg-active: var(--bubble-btn-primary-light-bg-active);
  --bubble-btn-text: var(--bubble-btn-primary-light-text);
  --bubble-btn-text-hover: var(
    --bubble-btn-primary-light-text-hover,
    var(--bubble-btn-primary-light-text)
  );
  --bubble-btn-focus-ring-inner: var(--bubble-btn-primary-light-focus-inner);
  --bubble-btn-focus-ring-outer: var(--bubble-btn-primary-light-focus-outer);
}

.bubble-button.button--secondary {
  --bubble-btn-bg: var(--bubble-btn-secondary-bg);
  --bubble-btn-bg-hover: var(--bubble-btn-secondary-bg-hover);
  --bubble-btn-bg-active: var(--bubble-btn-secondary-bg-active);
  --bubble-btn-text: var(--bubble-btn-secondary-text);
  --bubble-btn-text-hover: var(--bubble-btn-secondary-text-hover, var(--bubble-btn-secondary-text));
  --bubble-btn-focus-ring-inner: var(--bubble-btn-secondary-focus-inner);
  --bubble-btn-focus-ring-outer: var(--bubble-btn-secondary-focus-outer);
}

.bubble-button.button--small {
  --bubble-btn-height: var(--bubble-btn-size-small);
  --bubble-btn-padding-x: var(--bubble-btn-padding-x-small);
  --bubble-btn-bubble-size: var(--bubble-btn-bubble-size-small);
}

.bubble-button.button--medium {
  --bubble-btn-height: var(--bubble-btn-size-medium);
  --bubble-btn-padding-x: var(--bubble-btn-padding-x-medium);
  --bubble-btn-bubble-size: var(--bubble-btn-bubble-size-medium);
}

.bubble-button.button--large {
  --bubble-btn-height: var(--bubble-btn-size-large);
  --bubble-btn-padding-x: var(--bubble-btn-padding-x-large);
  --bubble-btn-bubble-size: var(--bubble-btn-bubble-size-large);
}