.btn
{
  padding: var(--spacing-medium);
  border: medium solid var(--color-primary-hover);
  background-color: var(--color-primary);
  color: var(--color-text-light);
  border-radius: calc(var(--border-radius) * 3);
  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);

  font-weight: bold;
}

.btn:hover 
{
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

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

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

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

.btn--secondary 
{
  background-color: #fff;
  border: medium solid var(--color-secondary);
  color: var(--color-secondary);
}

.btn--secondary:hover 
{
  background-color: unset;
}

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

.btn--dangerous 
{
  border: medium solid var(--color-dangerous-active);
  background-color: #fff;
  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;
}

#print-btn,
#export-btn
{
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--regular-height);

  text-transform: capitalize;

  line-height: .25;

  gap: .5rem;
}