@import "../base/variables.less";
@import "../base/mixins.less";

#shoppingListContent {
  max-height: 35em;
  overflow: auto;
  margin: 1em 0 3em;

  .unit {
    display: inline-block;
    width: 5em;
  }
  .ingredientName {
    display: inline-block;
  }
}

@media print {
  #shoppingListContent {
    max-height: none;
    overflow: auto;
  }
}

#shoppingList ul {
  list-style-type: circle !important;
  margin-left: 1em;
}

.gray-content {
  background: #E9E9E9;
  padding: 1.5em 3em;
}

.printShoppingList {
  background-color: @colored;
  text-transform: uppercase;
  padding: 0.3em 0.7em;
  font-size: 130%;
  color: white;
}

.shopping-list-header {
  text-align: center;
  h3 {
    color: @colored;
    margin-top: 10px;
  }
}