:root {
  
  --btn-font-family: var(--ff-primary);
  --btn-font-size: var(--text-m);
  --btn-text-s: calc(var(--btn-font-size) - 0.2em);
  --btn-font-weight: var(--font-600);
  --btn-line-height: var(--line-height-xs);
  --btn-text-transform: uppercase;
  --btn-letter-spacing: 0.05em;

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

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

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

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

  
  --btn-outline-bg: transparent;
  --btn-outline-border: var(--border-on-action-outline-primary);
  --btn-outline-color: var(--text-on-action-outline-primary);
  --btn-outline-bg-hover: var(--action-outline-primary-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);
  line-height: var(--btn-line-height);
  text-transform: var(--btn-text-transform);
  letter-spacing: var(--btn-letter-spacing);
  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);
}

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

.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--small {
  font-size: var(--btn-text-s);
  padding: var(--btn-padding-small);
}