/* Button */

/* 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;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
button:not(:disabled),
a.button[href]
{
  cursor: pointer;
}
button:disabled,
a.button:not([href])
{
  opacity: 0.3;
}
table button,
table a.button
{
  margin: -0.25rem 0;
  padding: 0.25rem 0.625rem;
  font-size: var(--size-tiny);
}
button:not(:disabled):active,
a.button[href]: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);
}

/* SVG icon inside button */

button:has(> svg),
a.button:has(> svg)
{
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
button > svg,
a.button > svg
{
  width: 1.25rem;
  height: 1.25rem;
  margin: -0.25rem;
}

/* 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%;
  }
}