:host {
  display: block;
  --focus-ring: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);
}

:host:focus-visible .cart {
  box-shadow: var(--focus-ring);
}

.cart {
  position: fixed;
  bottom: var(--sc-cart-icon-bottom, 30px);
  right: var(--sc-cart-icon-right, 30px);
  left: var(--sc-cart-icon-left, auto);
  top: var(--sc-cart-icon-top, auto);
  background: var(--sc-cart-icon-background, var(--sc-color-primary-500));
  border-radius: var(--sc-cart-icon-border-radius, var(--sc-input-border-radius-medium));
  width: var(--sc-cart-icon-width, 60px);
  height: var(--sc-cart-icon-height, 60px);
  color: var(--sc-cart-icon-color, var(--sc-color-primary-text, var(--sc-color-white)));
  font-family: var(--sc-cart-font-family, var(--sc-input-font-family));
  font-weight: var(--sc-font-weight-semibold);
  transition: opacity var(--sc-transition-medium) ease;
  box-shadow: var(--sc-shadow-small);
  cursor: pointer;
}
.cart:hover {
  opacity: 0.8;
}
.cart__container {
  font-size: 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}
.cart__counter {
  position: absolute;
  top: -8px;
  left: auto;
  bottom: auto;
  right: -8px;
  font-size: 12px;
  border-radius: var(--sc-cart-counter-border-radius, 9999px);
  color: var(--sc-cart-counter-color, var(--sc-color-white));
  background: var(--sc-cart-counter-background, var(--sc-color-gray-900));
  box-shadow: var(--sc-cart-icon-box-shadow, var(--sc-shadow-x-large));
  padding: 4px 10px;
  line-height: 18px;
  z-index: 1;
}