.cart-quantity {
  cursor: pointer;
}

.cart-drawer-outer {
  display: none;

  &.is-active {
    display: block;
  }
  &.is-visible {
    .cart-drawer {
      transform: translateX(0);
    }
    .cart-drawer-overlay {
      opacity: 0.8;
    }
  }
}
.cart-drawer-overlay {
  opacity: 0;
  transition: all var(--slow) var(--ease);
}
.cart-drawer {
  max-width: 500px;
  transition: all var(--slow) var(--ease);
  transform: translateX(100%);
  flex-direction: column;
  padding-bottom: 160px; /* make room for footer */

  header {
    border-bottom: 1px solid var(--gray);
    height: 75px;

    @media (--m) {
      height: 100px;
    }

    button {
      height: 30px;
      width: 30px;

      &:focus {
        outline: 1px dashed var(--gray);
      }

      svg {
        height: 15px;
        width: 15px;
      }
    }
  }
}
.cart-drawer__items {
  overflow: auto;
  padding-top: 75px;

  @media (--m) {
    padding-top: 100px;
  }

  svg.loader {
    width: 100px;
    height: 100px;
    animation-duration: 1.5s;
    animation-name: pulse;
    animation-iteration-count: infinite;
  }
}

.cart-drawer__item {
  padding: 2em 0 1.5em;
  border-top: 1px solid var(--gray);

  &:first-child {
    border-top: 0;
  }

  img {
    width: 90px;
  }

  button {
    top: 1.5em;

    svg {
      width: 10px;
      height: 10px;
    }
  }
}
.cart-drawer__item__remove {
  top: 1.5em;

  svg {
    width: 10px;
    height: 10px;
  }
}