/* Copyright 2024-2025 The Forgejo Authors. All rights reserved.
 * SPDX-License-Identifier: GPL-3.0-or-later */

:root {
  --button-min-height: 36px;
  --button-padding-inline: 1.35rem;
}

:root .small.button,
:root .small.button-row,
:root .small.button-sequence {
  --button-min-height: 34px;
  --button-padding-inline: 1.25rem;
}

@media (pointer: coarse) {
  :root {
    --button-min-height: 40px;
  }

  :root .small.button,
  :root .small.button-row,
  :root .small.button-sequence {
    --button-min-height: 38px;
  }
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: var(--button-min-height);
  padding-block: 0;
  padding-inline: var(--button-padding-inline);
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--border-radius);
}

.button:hover,
.button:focus {
  text-decoration: none;
}

.button.primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.button.primary:hover,
.button.primary:focus {
  background: var(--color-primary-hover);
}

.button.secondary {
  background: var(--color-button);
  border: 1px solid var(--color-light-border);
  color: var(--color-text-light);
}

.button.secondary:hover,
.button.secondary:focus {
  color: var(--color-text);
}

/* Dropdown openers should be at least tall as buttons they are in line with, and
 * as wide as they are tall */
.button-row details.dropdown summary,
.button-sequence details.dropdown summary {
  min-height: var(--button-min-height);
  min-width: var(--button-min-height);
}

/* button-row is a simple helper made to improve consistency of fomantic buttons
 * placed in a row. It provides gap and cancels out fomantic's margins */
.button-row {
  gap: var(--button-spacing);
}

/* button-sequence is a more complex helper that has wrap. Using it is preferred
 * but also requires deeper consideration */
.button-sequence {
  display: flex;
  flex-flow: wrap;
  gap: var(--button-spacing);
}

/* Fomantic buttons have annoying margins to set distance between elements. In
 * the button-row/sequence helpers this is set by flex+gap */
.button-row .ui.button {
  margin-right: 0;
}
.button-sequence .ui.button {
  margin: 0 !important;
}