hdyviewswitcher > button {
  padding: 0;
  margin: 0;
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
  box-shadow: none;
  font-size: 1rem;
}

hdyviewswitcher > button:not(:checked):not(:hover) {
  background: transparent;
}

hdyviewswitcher > button:not(:only-child):not(:last-child) {
  border-right-width: 0px;
}

hdyviewswitcher > button:not(only-child):first-child:not(:checked):not(:hover) {
  border-left-color: transparent;
}

hdyviewswitcher > button:not(:checked):not(:hover) + button:not(:checked):not(:hover) {
  border-left-color: transparent;
}

hdyviewswitcher > button:not(only-child):last-child:not(:checked):not(:hover) {
  border-right-color: transparent;
}

hdyviewswitcher > button:not(:checked):hover:not(:backdrop) {
  background-image: image(lighter(@theme_bg_color));
}

hdyviewswitcher > button:not(only-child):first-child:not(:checked):hover {
  border-left-color: shade(@borders, 1.15);
}

hdyviewswitcher > button:not(:checked):hover + button:not(:checked):not(:hover) {
  border-left-color: shade(@borders, 1.15);
}

hdyviewswitcher > button:not(:checked):not(:hover) + button:not(:checked):hover {
  border-left-color: shade(@borders, 1.15);
}

hdyviewswitcher > button:not(only-child):last-child:not(:checked):hover {
  border-right-color: shade(@borders, 1.15);
}

headerbar hdyviewswitcher > button:not(:checked):hover:not(:backdrop) {
  /* Reimplementation of $button_fill from Adwaita. The shade should be 4% and
   * 1% in light and dark mode respectively, so please note the shade is a bit
   * too strong in dark mode.
   *
   * The colors are made only 70% visible to avoid the highlight to be too
   * strong.
   */
  background-image: linear-gradient(to top, shade(alpha(@theme_bg_color, 0.7), 0.96) 2px, alpha(@theme_bg_color, 0.7));
}

headerbar hdyviewswitcher > button:not(only-child):first-child:not(:checked):hover {
  border-left-color: @borders;
}

headerbar hdyviewswitcher > button:not(:checked):hover + button:not(:checked):not(:hover) {
  border-left-color: @borders;
}

headerbar hdyviewswitcher > button:not(:checked):not(:hover) + button:not(:checked):hover {
  border-left-color: @borders;
}

headerbar hdyviewswitcher > button:not(only-child):last-child:not(:checked):hover {
  border-right-color: @borders;
}

hdyviewswitcher > button:not(:checked):hover:backdrop,
headerbar hdyviewswitcher > button:not(:checked):hover:backdrop {
  background-image: image(@theme_bg_color);
}

hdyviewswitcher > button > stack > box.narrow {
  font-size: 0.75rem;
  padding-top: 7px;
  padding-bottom: 5px;
}

hdyviewswitcher > button > stack > box.narrow image,
hdyviewswitcher > button > stack > box.narrow label {
  padding-left: 8px;
  padding-right: 8px;
}

hdyviewswitcher > button box.wide {
  padding: 8px 12px;
}

hdyviewswitcher > button > stack > box.wide label:dir(ltr) {
  padding-right: 7px;
}

hdyviewswitcher > button > stack > box.wide label:dir(rtl) {
  padding-left: 7px;
}

hdyviewswitcher > button > stack > box label.active {
  font-weight: bold;
}

hdyviewswitcher > button.needs-attention:active > stack > box label,
hdyviewswitcher > button.needs-attention:checked > stack > box label {
  animation: none;
  background-image: none;
}

hdyviewswitcher > button.needs-attention > stack > box label {
  animation: needs_attention 150ms ease-in;
  background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3584e4), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent));
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  background-position: right 0px, right 1px;
}

hdyviewswitcher > button.needs-attention > stack > box label:backdrop {
  background-size: 6px 6px, 0 0;
}

hdyviewswitcher > button.needs-attention > stack > box label:dir(rtl) {
  background-position: left 0px, left 1px;
}
