/* headings on the recipes page */
.heading {
  padding: 20px 0 10px 0;
}

label.heading {
  font: 16px Cantarell;
  font-weight: bold;
}

label.sidebar {
  background: none;
  border: none;
  padding: 10px;
}

scrolledwindow.error {
  border: 1px solid red;
  background: red;
}

box.searchbar {
  border-bottom: 1px solid black;
}

button.circular.small {
  padding: 0px;
}

image.checkmark.checked {
	color: inherit;
}

image.checkmark:not(.checked) {
	color: transparent;
}

image.framed {
  border: 1px solid @borders;
  border-radius: 4px;
}

.image-switcher {
  background: none;
}

image.chef.circular {
	border-radius: 9990px;
}

.chef.tile {
  min-width: 258px;
}

label.chef.name {
  background: @theme_base_color;
  color: @theme_fg_color;
  padding: 10px;
  font-weight: bold;
}

.view.tile {
  padding: 0;
  text-shadow: none;
  border: 1px solid @borders;
  background: @theme_base_color;
  border-radius: 0;
}

.favorites.view.tile {
  background: @theme_selected_bg_color;
  border: 1px solid @selected_borders;
  box-shadow: none;
}

.favorites.view.tile:backdrop {
  background: @theme_unfocused_selected_bg_color;
  border: 1px solid @selected_borders;
}

.favorites.view.tile label,
.favorites.view.tile image {
  color: @theme_selected_fg_color;
}

.favorites.view.tile label:backdrop,
.favorites.view.tile image:backdrop {
  color: @theme_unfocused_selected_fg_color;
}

.recipe.view.tile {
  color: mix(@theme_base_color,@theme_fg_color,0.1);
  background-image: -gtk-recolor(url('resource:///org/gnome/Recipes/org.gnome.Recipes-symbolic.symbolic.png'));
  background-size: 100%;
  background-position: 80px -80px;
  min-width: 258px;
  min-height: 200px;
}

.recipe.view.small.tile {
  background-image: none;
  min-width: 258px;
  min-height: 64px;
}

label.recipe.name {
  background: @theme_base_color;
  color: @theme_fg_color;
  font-weight: bold;
  font-size: 110%;
  padding: 10px 10px 0;
}

label.recipe.author {
  background: @theme_base_color;
  color: mix(@theme_base_color,@theme_fg_color,0.7);
  font-size: 100%;
  padding: 0 10px 10px;
}

label.recipe.author.small,
label.recipe.name.small {
  background: @theme_base_color;
}

@define-color diet_tag_bg #cc1212;
@define-color diet_tag_fg #ffffff;

.diet-tag {
  background-image: none;
  background-color: @diet_tag_bg;
  color: @diet_tag_fg;

  border-radius: 4px;
  border-width: 0;

  margin: 2px;
  padding: 4px;
}

.diet-tag:hover {
  background-color: shade(@diet_tag_bg, 1.10);
  color: @diet_tag_fg;
}

.diet-tag.button,
.diet-tag.button:hover,
.diet-tag.button:active,
.diet-tag.button:active:hover {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-image: none;
  border-width: 0;
}

.diet-tag.button:hover {
    color: shade(@diet_tag_bg, 2.10);
}

@define-color meal_tag_bg #65a434;
@define-color meal_tag_fg #ffffff;

.meal-tag {
  background-image: none;
  background-color: @meal_tag_bg;
  color: @meal_tag_fg;

  border-radius: 4px;
  border-width: 0;

  margin: 2px;
  padding: 4px;
}

.meal-tag:hover {
    background-color: shade(@meal_tag_bg, 1.10);
    color: @meal_tag_fg;
}

.meal-tag.button,
.meal-tag.button:hover,
.meal-tag.button:active,
.meal-tag.button:active:hover {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-image: none;
  border-width: 0;
}

.meal-tag.button:hover {
    color: shade(@meal_tag_bg, 2.10);
}

@define-color spice_tag_bg #c12c87;
@define-color spice_tag_fg #ffffff;

.spice-tag {
  background-image: none;
  background-color: @spice_tag_bg;
  color: @spice_tag_fg;

  border-radius: 4px;
  border-width: 0;

  margin: 2px;
  padding: 4px;
}

.spice-tag:hover {
    background-color: shade(@spice_tag_bg, 1.10);
    color: @spice_tag_fg;
}

.spice-tag.button,
.spice-tag.button:hover,
.spice-tag.button:active,
.spice-tag.button:active:hover {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-image: none;
  border-width: 0;
}

.spice-tag.button:hover {
    color: shade(@spice_tag_bg, 2.10);
}

@define-color ingredient_tag_bg #3465a4;
@define-color ingredient_tag_fg #ffffff;

.ingredient-tag {
  background-image: none;
  background-color: @ingredient_tag_bg;
  color: @ingredient_tag_fg;

  border-radius: 4px;
  border-width: 0;

  margin: 2px;
  padding: 4px;
}

.ingredient-tag:hover {
    background-color: shade(@ingredient_tag_bg, 1.10);
    color: @ingrdient_tag_fg;
}

.ingredient-tag.button,
.ingredient-tag.button:hover,
.ingredient-tag.button:active,
.ingredient-tag.button:active:hover {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  border-image: none;
  border-width: 0;
}

.ingredient-tag.button:hover {
  color: shade(@ingredient_tag_bg, 2.10);
}

image.very-spicy {
        color: red;
}

.preview-list {
	background: black;
}

.favorite-button:hover,
.favorite-button:checked {
  color: red;
}

.shop-button:hover,
.shop-button:checked {
  color: shade(green, 1.1);
}

.favorite-button:not(:hover),
.shop-button:not(:hover) {
  background-image: none;
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

.favorite-button:backdrop,
.shop-button:backdrop {
  background: transparent;
}

flowbox flowboxchild {
  padding: 0;
  border-radius: 0;
}

.image-page {
        background: black;
}

.image-page .content {
        border: 1px solid white;
}

.note {
  background: #8091c4;
}

.note label,
.note image {
  color: white;
  margin: 5px 0 5px 10px;
}

.note.content {
  background: #a8c3e1;
  padding: 10px;
}

.note:backdrop {
  background: #b1b6c4;
}

.note.content:backdrop {
  background: #cbd6e1;
}

button.osd {
        padding: 10px;
}

.cooking {
        background: black;
}

.cooking.overlay {
        background: gray;
        padding: 40px;
        border-radius: 20px;
}

.cooking .heading {
        font-size: 30px;
}

.cooking-image {
        color: #ddd;
        background: #aaa;
        min-width: 400px;
        min-height: 400px;
}

.timer-label,
.cooking-label {
        font-size: 30px;
        color: #ddd;
}

.cooking-heading {
        font-size: 20px;
        color: #ddd;
}

.timer-frame border {
        border: none;
}

.pause-button {
        color: #ccc;
        border-color: #ccc;
        border-width: 1px;
        box-shadow: none;
        background: #444;
}

label.serves-overlay {
        background-color: @theme_selected_bg_color;
        color: @theme_selected_fg_color;
        padding: 5px;
        min-width: 20px;
        min-height: 20px;
}

label.notification-label {
        padding: 0 80px 0 0;
        font-weight: bold;
}
