/* Buttons */

/* Default button */

button,
a.button
{
  display: block;
  width: fit-content;
  padding: 0.375rem 0.75rem;
  color: var(--inverse);
  background: var(--control);
  border-radius: 0.375rem;
  font-size: var(--size-small);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
button:active,
a.button:active
{
  background: var(--control-active);
}
button.primary,
a.button.primary
{
  background: var(--control-primary);
}
button.primary:active,
a.button.primary:active
{
  background: var(--control-primary-active);
}

/* Buttons bar */

div.buttons
{
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  margin: 0.5rem 0;
}
@media (max-width: 32rem)
{
  div.buttons
  {
    align-items: stretch;
  }
  div.buttons > *
  {
    flex: 1 1 auto;
  }
}
@media (max-width: 24rem)
{
  div.buttons > *
  {
    flex: 1 1 100%;
  }
}