h-usersite/angular/src/app/pages/cart/cart.component.scss

:host {
  .cart {
    margin-top: 16px;
    margin-bottom: 100px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .elementor-menu-cart {
    &__product {
      grid-template-columns: 71px auto;
      grid-template-rows: var(
        --price-quantity-position--grid-template-rows,
        auto auto
      );
      position: relative;
      display: grid;
      padding-bottom: 0;
      padding-right: 30px;

      .variation {
        display: grid;
        grid-template-columns: max-content auto;
        margin: 10px 8px;
        color: var(--product-variations-color, #373a3c);

        dt {
          grid-column-start: 1;
          font-weight: 700;
        }

        dd {
          grid-column-start: 2;
          -webkit-margin-start: 5px;
          margin-inline-start: 5px;
          margin-bottom: 0.5rem;
          margin-left: 6px;
        }
      }
    }

    &__product-image {
      grid-row-start: 1;
      grid-row-end: 3;
      width: 100%;

      img {
        border-radius: 6px;
        object-fit: cover;
      }
    }

    &__product-name {
      grid-column-start: 2;
      grid-column-end: 3;
      margin: 0;
      font-size: 14px;
      padding-left: 20px;
    }

    &__product-price {
      font-size: 14px;
      padding-left: 20px;
      grid-column-start: 2;
      grid-column-end: 3;
      -ms-flex-item-align: var(--price-quantity-position--align-self, end);
      align-self: var(--price-quantity-position--align-self, end);
      font-weight: 400;
    }

    &__product-remove {
      color: #818a91;
      width: var(--remove-item-button-size, 22px);
      height: var(--remove-item-button-size, 22px);
      border-radius: var(--remove-item-button-size, 22px);
      border: 1px solid var(--remove-item-button-color, #d4d4d4);
      text-align: center;
      overflow: hidden;
      position: absolute;
      top: 0px;
      right: 0;
      bottom: 20px;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;

      &::before,
      &::after {
        content: "";
        position: absolute;
        height: 1px;
        width: 50%;
        top: 50%;
        left: 25%;
        margin-top: -1px;
        background: var(--remove-item-button-color, #d4d4d4);
        z-index: 1;
        -webkit-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
      }

      &::before {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
      }

      &::after {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }

      & > a {
        display: block;
        z-index: 2;
        width: 100%;
        height: 100%;
        overflow: hidden;
        opacity: 0;
        position: absolute;
      }
    }

    &__bottom-info {
      position: fixed;
      width: 100%;
      left: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      bottom: 0;
      padding: 18px;
      background: #fff;
      z-index: 3;
      border-top: solid 1px #e7e7e7;
    }

    &__subtotal {
      font-weight: 600;
      font-size: 20px;
      display: flex;
      flex-direction: column;

      & .products-count {
        font-size: 12px;
        font-weight: 400;
      }
    }

    &__footer-buttons {
      a {
        padding: 12px;
        display: block;
        width: fit-content;
        background: var(--orange-main);
        border-radius: 4px;
        text-decoration: none;
        color: #fff;
        font-size: 12px;
      }
    }
  }

  .product-thumbnail {
    background: #eee;
    border-radius: 9px;
    height: 70px;
  }

  .product-change-amount {
    width: 50px;
    height: 30px;
    margin-top: 4px;
    border-radius: 5px;
    display: flex;
    border: solid #cbcbcb 1px;
    color: #525252;
    cursor: pointer;
    user-select: none;

    &__symbol {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-right: solid #cbcbcb 1px;
    }
  }

  .cart-product {
    &__supplements {
      position: absolute;
      right: 0;
      bottom: 26px;
      padding: 8px;
      background: #f9b004;
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }
  }

  .woocommerce-mini-cart__empty-message {
    text-align: center;
    margin-top: 16px;
  }

  hr {
    width: 80%;
    margin: 14px auto;
    border-top: solid #d1d1d1 1px;
  }

  .clear-cart {
    padding: 8px;
    border: none;
    border-radius: 4px;
    background: #d7120b;
    color: #fff;
    margin: 32px auto;
    display: block;
  }

  @media screen and (min-width: 650px) {
    .elementor-menu-cart__bottom-info {
      width: 450px;
      right: 0;
      left: auto;
    }
  }
}