
/* Main Window */
.translation-box {
  padding: 4px 12px 12px;
}

.translation-box.vertical {
  padding-bottom: 0;
  padding-top: 0;
}

.translation-side-box textview,
.translation-side-box text {
  background: none;
  color: inherit;
}

.translation-scrolled undershoot.bottom {
  border-bottom: 1px solid #ededed;
}

.translation-scrolled.top-undershoot undershoot.top {
  border-top: 1px solid #ededed;
}

.mistakes {
  margin: 6px;
  padding-right: 12px;
  padding-left: 12px;
  padding-top: 9px;
  padding-bottom: 9px;
  background-color: mix(@accent_bg_color, @window_bg_color, 0.7);
}

.pronunciation {
  padding: 9px;
}

/* Lang Selector */
.search_box {
  background: @popover_bg_color;
  border-bottom: 1px solid @borders;
  padding: 6px;
}

.lang-selector list {
  padding: 6px;
  padding-top: 4px;
}

.lang-selector row {
  margin-top: 2px;
}

.lang-selector separator {
  margin: 0 6px;
}

/* Actionbar */
actionbar.flat > revealer > box {
  background: none;
  box-shadow: none;
}

/* Theme Switcher */
/* Base on gnome-text-editor */
/* https://gitlab.gnome.org/GNOME/gnome-text-editor/-/blob/main/src/style.css#L20 */
.themeswitcher {
  margin: 9px;
}
.themeswitcher checkbutton {
  padding: 0;
  min-height: 44px;
  min-width: 44px;
  padding: 1px;
  background-clip: content-box;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px @borders;
}
.themeswitcher checkbutton.system:checked,
.themeswitcher checkbutton.light:checked,
.themeswitcher checkbutton.dark:checked {
  box-shadow: inset 0 0 0 2px @theme_selected_bg_color;
}
.themeswitcher checkbutton.system {
  background-image: linear-gradient(to bottom right, #fff 49.99%, #202020 50.01%);
}
.themeswitcher checkbutton.light {
  background-color: #fff;
}
.themeswitcher checkbutton.dark {
  background-color: #202020;
}
.themeswitcher checkbutton radio {
  -gtk-icon-source: none;
  border: none;
  background: none;
  box-shadow: none;
  min-width: 12px;
  min-height: 12px;
  transform: translate(27px, 14px);
  padding: 2px;
}
.themeswitcher checkbutton.theme-selector radio:checked {
  -gtk-icon-source: -gtk-icontheme("object-select-symbolic");
  background-color: @theme_selected_bg_color;
  color: @theme_selected_fg_color;
}
