@use "base/reset";
@use "base/_animations";

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

body,
html {
  font-family: Verdana, sans-serif;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

turbo-frame {
  display: block;
  width: 100%;
  min-width: 100%;
}

.slider-container {
  gap: 1rem;
}

.slider-amounts {
  display: flex;
  justify-content: space-between;
  justify-content: flex-end;

  div:nth-child(2) {
    margin: 0 0.5rem;
  }
}

.slider-item {
  border-top: 1px solid #ccc;
  padding: 1rem 0;
}

h4 + .slider-item {
  border-top: none;
}

#shopping-list label, #shopping-list label div input[type="checkbox"] {
  cursor: pointer;
}

#shopping-list label:hover {
  background-color: #eee;
}

#shopping-list label:has(div input[type="checkbox"]:checked) {
  background-color: lightgreen;
  text-decoration: line-through;
  opacity: 0.7;
}

h1{
  font-size:2.25rem;
  line-height:2.5rem
}

h2{
  font-size:1.875rem;
  line-height:2.25rem
}

h3{
  font-size:1.5rem;
  line-height:2rem
}

h4{
  font-size:1.25rem;
  line-height:1.75rem
}

h5{
  font-size:1.125rem;
  line-height:1.75rem
}

.pb-3\/4 {
  padding-bottom: 75%;
}

.menu-auswahl-grid-container label:has(input:checked) {
  border: 5px solid lightgreen;
}

.menu-auswahl-grid-container label:has(input:not(:checked)) {
  border: 5px solid white;
  box-shadow: 0 0 5px 1px rgb(225, 225, 225);
}