:host {
  --primary: rgb(0, 102, 90);
  --inverse-surface: rgb(0, 102, 90);
  --surface: #ffffff;
  --secondary-container: #e0f2f1;
  --surface-variant: #e0f2f1;
}
table.table td,table.table th {
  padding: .5rem;
}

.s-items {
  display: flex;
  gap: .1rem 1rem;
}
.s-items:not(:last-child) {
  margin-top: 1rem;
}
@media screen and (min-width: 769px) {
  .s-name {
    flex: 1;
  }
  .s-price {
    min-width: 90px;
  }
  .s-quantity {
    min-width: 30px;
  }
  .s-total {
    min-width: 70px;
  }
}
@media screen and (max-width: 768px) {
  .s-items {
    flex-wrap: wrap;
  }
  .s-name {
    width: calc(100% - 5rem);
  }
  .s-price {
    width: 60%;
    padding-left: 5rem;
    
  }
  .s-quantity {
    width: calc(20% - 2rem);
  }
  .s-total {
    width: 20%;
  }
}

.thumbnail {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  background-color: white;
  border: 1px solid rgba(173,181,189,.5);
  border-radius: 0.25rem;
}
.thumbnail img{
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.thumbnail-lg {
  width: 5rem;
  height: 5rem;
}
.thumbnail-sm {
  width: 2.5rem;
  height: 2.5rem;
}

.icon-btn {
  height: 2rem;
  width: 2rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: text-bottom;
  border: 1px solid grey;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
}
.icon-btn:hover {
  background-color: rgba(241,243,245,var(--bg-opacity));
}