/* Copyright 2025 Renofy Ltd. All rights reserved. */
/* Toggle height, width, padding and gap is defined in the destination page css file - this gives flexibility to adjust to the size of surounding buttons */

.save-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;

}

/* Link states - prevent blue visited links */
.save-toggle:link,
.save-toggle:visited {
  color: var(--color-text-primary);
}

.save-toggle__icon .icon {
  fill: none;
  transition: fill var(--transition-fast);
  margin-top: 0.25rem;
}

.save-toggle__label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.save-toggle.active,
.save-toggle.active .icon {
  color: var(--color-pink);
  fill: var(--color-pink);
}

@media (min-width: 821px) {
  .save-toggle__label {
    font-size: var(--font-size-sm);
  }

  .save-toggle:hover {
    background-color: var(--color-bg-surface);
  }
}