.cart {
  display: grid;
  grid-gap: var(--spacing-xl);
  position: relative;
}

.cart-items__controls {
  margin-bottom: var(--spacing-md);
  display: flex;
}

.cart-items__control--clear {
  margin-left: auto;
  background-color: transparent;
  padding: 0;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  font: var(--typography-label-medium);
}

.cart-items__control--clear::before {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  background: transparent url('../../../icons/111111/trash-can-outline.svg') center no-repeat;
  background-size: 1rem;
  margin-right: var(--spacing-xxs);
}

.cart-items .cart-item:not(:last-child) {
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--spacing-md);
}

.cart-item {
  padding: var(--spacing-md) 0;
  display: grid;
  grid-gap: var(--spacing-sm);
  grid-template-areas:
    "media info"
    "media controls";
  grid-template-columns: 80px 1fr;
}

.cart-item__info {
  grid-area: info;
}

.cart-item__additional {
  grid-area: controls;
}

.cart-item__media {
  grid-area: media;
  align-self: center;
}

.cart-item__sku {
  font: var(--typography-label-medium);
  color: var(--color-text-dimmed);
}

.cart-item__title {
  font-weight: bold;
}

.cart__empty {
  grid-column: span 2;
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: var(--spacing-xl) 0;
}

.cart-empty__title {
  font: var(--typography-headline-large);
  font-weight: bold;
}

.cart-empty__action {
  margin-top: var(--spacing-sm);
}

.cart__content {
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.cart-sidebar {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  position: sticky;
  top: var(--spacing-lg);
  background-color: var(--color-surface);
}

.cart-sidebar__total-amount {
  font: var(--typography-headline-medium);
  font-weight: bold;
  text-align: center;
}

.cart-item__quantity {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.cart-item-quantity {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  display: flex;
  width: 100%;
  max-width: 150px;
}

.cart-item-quantity__button {
  --icon: none;
  width: 2rem;
  background: transparent var(--icon) center no-repeat;
  background-size: 1.2rem;
  border: none;
  cursor: pointer;
  flex: 0 0 2rem;
}

.cart-item-quantity__button--minus {
  --icon: url('../../../icons/111111/minus.svg');
}

.cart-item-quantity__button--plus {
  --icon: url('../../../icons/111111/plus.svg');
}

.cart-item-quantity__input {
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  padding: var(--spacing-xxs) var(--spacing-xs);
  text-align: center;
  -moz-appearance: textfield;
  min-width: 3rem;
}


.cart-item-quantity__input::-webkit-outer-spin-button,
.cart-item-quantity__input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <- Apparently some margin are still there even though it's hidden */
}

.cart-item__additional {
  display: grid;
  align-items: center;
}

.cart-item__controls {
  margin-left: auto;
  order: -1;
}

.cart-item__unit-price {
  margin-top: var(--spacing-sm);
  text-align: center;
  font: var(--typography-label-medium);
  color: var(--color-text-dimmed);
}

.cart-item__total-price {
  font-weight: bold;
  text-align: center;
}

.cart-item__control--remove {
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent url('../../../icons/111111/trash-can-outline.svg') center no-repeat;
  cursor: pointer;
}

.cart-item__photo {
  border-radius: var(--radius-sm);
}

.cart-sidebar__checkout {
  width: 100%;
  margin-top: var(--spacing-sm);
}

.cart-item__attributes {
  margin-top: var(--spacing-sm);
}

.cart-item-attribute {
  font: var(--typography-label-medium);
}

.cart-item-attribute__label {
  color: var(--color-text-dimmed);
}

.cart-item-attribute__value {

}

.cart-sidebar__summary {
  color: var(--color-text-dimmed);
  font: var(--typography-body-small);
  margin-bottom: var(--spacing-md);
}

.cart-sidebar__summary-value {
  margin-left: auto;
}

.cart-sidebar__summary-item {
  display: flex;
  align-items: center;
}

.cart-sidebar__summary-spacer {
  flex-grow: 1;
  border-bottom: 1px dotted var(--color-border);
  margin: 0 var(--spacing-sm) 7px;
  align-self: flex-end;
}

.cart-additional-info {
  font: var(--typography-body-small);
  color: var(--color-text-dimmed);
  margin: var(--spacing-lg) 0;
}

@media (min-width: 768px) {
  .cart-item {
    grid-template-areas: none;
    grid-template-columns: 80px 1fr max-content;
  }

  .cart-item__info {
    grid-area: unset;
  }

  .cart-item__additional {
    grid-area: unset;
  }

  .cart-item__media {
    grid-area: unset;
  }

  .cart-item__additional {
    grid-gap: var(--spacing-md);
    grid-template-columns: 120px 80px 40px;
  }

  .cart-item__controls {
    order: 0;
  }
}

@media (min-width: 1024px) {
  .cart {
    grid-template-columns: 1fr 300px;
  }
}