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

:root .switch {
  --switch-padding-y: .5em;
  --switch-padding-x: 1.125em;
}

@media (pointer: coarse) {
  :root .switch {
    --switch-padding-y: .75em;
  }
}

.switch {
  display: grid;
  grid-auto-flow: column;
  height: fit-content;
  align-items: center;
  align-self: center;
  background: var(--color-menu);
  border: 1px solid var(--color-input-border);
  border-radius: var(--border-radius);
}

.switch > .item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: var(--switch-padding-y) var(--switch-padding-x);
  color: var(--color-text);
  border-radius: var(--border-radius);
  text-wrap: nowrap;
  transition: background-color 0.1s ease;
}

.switch > .item:hover {
  background: var(--color-hover);
}

/* Item that has to crawl under it's active neighbor, so when it is hovered,
there are no ugly unpainted v/^ shapes between them */
.switch > .item:has(+ .active.item) { /* Active neighbor is next item */
  margin-right: calc(-1 * var(--border-radius));
  padding-right: calc(var(--switch-padding-x) + var(--border-radius));
}
.switch > .active.item + .item { /* Active neighbor is previous item */
  margin-left: calc(-1 * var(--border-radius));
  padding-left: calc(var(--switch-padding-x) + var(--border-radius));
}

.switch > .active.item {
  z-index: 2;
  padding-left: var(--switch-padding-x);
  background: var(--color-active);
  outline: 1px solid var(--color-input-border);
}

.switch > button.item {
  background: transparent;
}