.btn
{
  padding: var(--spacing-medium);
  border: none;
  background-color: var(--color-primary);
  color: var(--color-text-light);
  border-radius: calc(var(--border-radius)/2);
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-sans);
}

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

.btn:active 
{
  background-color: var(--color-primary-active);
}

.action::before 
{
  content: "» ";
}

.btn-group 
{
  display: flex;
  gap: var(--spacing-medium);
}

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

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

.btn--secondary:active 
{
  background-color: var(--color-secondary-active);
}

a.btn:hover 
{
  text-decoration: none;
}

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

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

.btn--dangerous:active 
{
  background-color: var(--color-dangerous-active);
}

.btn--disabled 
{
  background-color: var(--color-disabled);
  opacity: .5;
}
.btn--disabled:hover
{
  background-color: var(--color-disabled);
}

.btn--sync 
{
  border: none;
  background-color: unset;
  color: var(--color-text-light);
  cursor: pointer;

  padding: var(--spacing-small);

  display: block;
  width: 100%;

  text-align: start;

  border-radius: 4px;

  text-transform: capitalize;
  font-size: var(--font-size-base);

  line-height: 1.5;
}

.btn--sync:hover
{
  background-color: #fff;
  color: var(--color-primary);
  box-shadow: inset #00000032 0px 0px 1px;
}