/* Button */

button:not(:disabled),
a.button[href]
{
  cursor: pointer;
}
button:disabled,
a.button:not([href])
{
  opacity: 0.3;
  cursor: inherit;
}

/* Default button */

button:not(.icon),
a.button:not(.icon)
{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: var(--button-padding-x) var(--button-padding-y);
  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(.icon).small,
a.button:not(.icon).small
{
  padding: var(--small-button-padding-x) var(--small-button-padding-y);
  font-size: var(--size-tiny);
}
button:not(.icon).bordered,
a.button:not(.icon).bordered
{
  padding: calc(var(--button-padding-x) - 1px) calc(var(--button-padding-y) - 1px);
  background: var(--bordered-control-background);
  color: var(--control);
  border: 1px solid var(--control);
}
button:not(.icon).bordered.small,
a.button:not(.icon).bordered.small
{
  padding: calc(var(--small-button-padding-x) - 1px) calc(var(--small-button-padding-y) - 1px);
}
button:not(.icon):not(.bordered):not(:disabled):hover,
a.button[href]:not(.icon):not(.bordered):hover
{
  background: var(--control-hover);
}
button:not(.icon):not(.bordered):not(:disabled):active,
a.button[href]:not(.icon):not(.bordered):active
{
  background: var(--control-active);
}
button:not(.icon).bordered:not(:disabled):active,
a.button[href]:not(.icon).bordered:active
{
  background: var(--bordered-control-background-active);
  color: var(--control-active);
  border-color: var(--control-active);
}

/* Default button color variants */

button.primary:not(.icon),
a.button.primary:not(.icon)
{
  background: var(--control-primary);
}
button.primary:not(.icon):hover,
a.button.primary:not(.icon):hover
{
  background: var(--control-primary-hover);
}
button.primary:not(.icon):active,
a.button.primary:not(.icon):active
{
  background: var(--control-primary-active);
}
button.destructive:not(.icon),
a.button.destructive:not(.icon)
{
  background: var(--control-destructive);
}
button.destructive:not(.icon):hover,
a.button.destructive:not(.icon):hover
{
  background: var(--control-destructive-hover);
}
button.destructive:not(.icon):active,
a.button.destructive:not(.icon):active
{
  background: var(--control-destructive-active);
}

/* Icon inside default button */

button:not(.icon) > svg,
a.button:not(.icon) > svg
{
  width: 1.25rem;
  height: 1.25rem;
  margin: -0.25rem;
}

/* Icon button */

button.icon,
a.button.icon
{
  margin: -0.25rem;
  padding: 0.25rem;
}
button.icon > svg,
a.button.icon > svg
{
  width: 1.5rem;
  height: 1.5rem;
}
button.icon path,
a.button.icon path
{
  fill: var(--control);
}
button.icon:hover path,
a.button.icon:hover path
{
  fill: var(--control-hover);
}
button.icon:active path,
a.button.icon:active path
{
  fill: var(--control-active);
}

/* Icon button color variants */

button.icon.primary path,
a.button.icon.primary path
{
  fill: var(--control-primary);
}
button.icon.primary:hover path,
a.button.icon.primary:hover path
{
  fill: var(--control-primary-hover);
}
button.icon.primary:active path,
a.button.icon.primary:active path
{
  fill: var(--control-primary-active);
}
button.icon.destructive path,
a.button.icon.destructive path
{
  fill: var(--control-destructive);
}
button.icon.destructive:hover path,
a.button.icon.destructive:hover path
{
  fill: var(--control-destructive-hover);
}
button.icon.destructive:active path,
a.button.icon.destructive:active path
{
  fill: var(--control-destructive-active);
}

/* Buttons bar */

div.buttons
{
  display: flex;
  flex-flow: row wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

/* Stretch buttons in the bar on narrower viewports when there are two or more */

@media (max-width: 24rem)
{
  div.buttons
  {
    gap: 0.75rem;
  }
  div.buttons:has(> :nth-child(2))
  {
    align-items: stretch;
  }
  div.buttons:has(> :nth-child(2)) > *
  {
    flex: 1 1 auto;
  }

  /* When there are exactly two buttons in the bar, their widths should be equal */

  div.buttons:has(> :nth-child(2):last-child) > *
  {
    flex: 1 1 0;
  }

  /* When the bar contains a div (e.g. for a confirmation modal), stretch the button inside it */

  div.buttons:has(> :nth-child(2)) > div > button,
  div.buttons:has(> :nth-child(2)) > div > a.button
  {
    width: 100%;
  }
}

/* Stretch and stack buttons in bar on very narrow viewports */

@media (max-width: 16rem)
{
  div.buttons
  {
    gap: 0.5rem;
  }
  div.buttons > *
  {
    flex: 1 1 100%;
  }
}

/* Button-like segmented toggle control */

div.segmented
{
  display: flex;
  font-size: var(--size-small);
  line-height: 1;
}
div.segmented label
{
  position: relative;
  padding: calc(var(--button-padding-x) - 1px) calc(var(--button-padding-y) - 1px);
  background: var(--bordered-control-background);
  color: var(--control);
  border: 1px solid var(--control);
}
div.segmented.small
{
  font-size: var(--size-tiny);
}
div.segmented.small label
{
  padding: calc(var(--small-button-padding-x) - 1px) calc(var(--small-button-padding-y) - 1px);
}
div.segmented label:first-child
{
  border-radius: 0.375rem 0 0 0.375rem;
}
div.segmented label:last-child
{
  border-radius: 0 0.375rem 0.375rem 0;
}
div.segmented label + label
{
  margin-left: -1px
}
div.segmented label:has(input:checked)
{
  z-index: 1;
  background: var(--bordered-control-background-checked);
  color: var(--primary);
}
div.segmented label:has(input:not(:checked):active)
{
  z-index: 2;
  background: var(--bordered-control-background-active);
  color: var(--control-active);
  border-color: var(--control-active);
}
div.segmented label input[type=radio]
{
  position: absolute;
  width: 1px;
  height: 1px;
  visibility: hidden;
}