:root {
  
  --btn-font-family: var(--ff-secondary);
  --btn-font-size: var(--text-m);
  --btn-text-s: calc(var(--btn-font-size) - 0.2em);
  --btn-font-weight: var(--font-400);
  --btn-line-height: var(--line-height-xs);
  --btn-text-transform: capitalize;
  --btn-letter-spacing:0;


  
  --btn-padding: var(--space-s) var(--space-m);
  --btn-padding-small: var(--space-xs) var(--space-s);
  --btn-gap: var(--space-xs);

  
  --btn-border-width: 2px;
  --btn-border-radius: var(--radius-none);

  
  --btn-bg: var(--action-primary);
  --btn-bg-hover: var(--action-primary-hover);
  --btn-color: var(--text-on-action-primary);

  
  --btn-light-bg: var(--white);
  --btn-light-bg-hover: var(--action-light-hover);
  --btn-light-color: var(--text-on-action-light);
  --btn-light-border:var(--border-on-action-light);

  
  --btn-outline-bg: transparent;
  --btn-outline-border: var(--border-on-action-outline);
  --btn-outline-color: var(--text-on-action-outline);
  --btn-outline-bg-hover:var(--action-outline-hover);
}


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-padding);
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  line-height: var(--btn-line-height);
  text-transform: var(--btn-text-transform);
  border: var(--btn-border-width) solid transparent;
  border-radius: var(--btn-border-radius);
  background-color: var(--btn-bg);
  color: var(--btn-color);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-global);
  white-space: nowrap;
}

.btn .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  stroke: currentColor;
  color: inherit;
  line-height: 1;
  flex-shrink: 0;
}

.btn:hover {
  background-color: var(--btn-bg-hover);
}


.btn--light {
  background-color: var(--btn-light-bg);
  color: var(--btn-light-color);
  border-color: var(--btn-light-border);
}

.btn--light:hover {
  background-color: var(--btn-light-bg-hover);
  color:var(--text-on-action-light-hover);
}

.btn--light:focus {
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary-default), transparent 60%);
}

.btn--outline {
  background-color: var(--btn-outline-bg);
  color: var(--btn-outline-color);
  border-color: var(--btn-outline-border);
}

.btn--outline:hover {
  background-color: var(--btn-outline-bg-hover);
}
.btn--outline:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}
.btn--small {
  font-size: var(--btn-text-s);
  padding: var(--btn-padding-small);
}

.btn--header{
   font-size: var(--text-s);
}

@media (max-width: 480px) {
  :root {
    --btn-font-size: var(--text-s);
  }
}