.shoping-cart {
  position: relative;
  margin-right: 0;
  .open-menu {
    position: relative;
    box-shadow: none;
  }
  a {
    .label {
      position: absolute;
      font-size: 9px;
      border-radius: 50%;
      top: 13px;
      right: 7px;
      width: 16px;
      height: 16px;
      text-align: center;
      align-items: center;
      display: inline-flex;
      justify-content: center;
      overflow: hidden;
      background-color: #e9352f;
      color: #fff;
    }

    span {
      @media (max-width: $maxSm) {
        display: none !important;
      }
    }
  }
}

.cartbar {
  width: 450px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: -450px;
  z-index: 1200;
  transition: all 0.3s;
  text-align: left;
  background-color: #fff;

  .cart-dismiss {
    width: 35px;
    height: 35px;
    position: absolute;
    top: 10px;
    right: 10px;
    transition: all 0.3s;
    border-radius: 7px;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cart-head {
    padding: 10px;
    border-bottom: 1px solid #444;
    transition: all 0.3s;
    text-align: center;
    h3 {
      text-align: center;
      font-size: 25px;
      font-weight: bold;
    }
    span {
      font-size: 14px;
      @media (max-width: $maxSm) {
        font-size: 12px;
      }
    }
    a {
      display: inline-block;
    }
  }
  .empty-cart {
    margin-bottom: 0;
    height: 88%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    li {
      display: inline-block;
      width: 80%;
      margin: auto;
      svg {
        font-size: 70px;
        margin-bottom: 15px;
      }
      span {
        font-size: 18px;
        font-weight: bold;
        display: block;
        margin-bottom: 15px;
      }
      div {
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;

        a {
          width: 75%;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 50px;
          @extend %transition;
        }
      }
    }
  }
  .shoping-items {
    height: 73vh;
    overflow-x: hidden;
    margin-bottom: 0;
    padding: 10px;
    transition: all 0.3s;
    position: relative;
    li {
      .item {
        padding: 5px;
        margin-bottom: 5px;
        height: auto;
        position: relative;
        box-shadow: initial;

        section {
          display: flex;
          align-items: center;

          a {
            padding: 0;
          }
          .img-box {
            width: 110px;
            height: 100px;
            flex-shrink: 0;
            border-radius: 50%;
            float: right;
            border-radius: 0;
            @media (max-width: $maxSm) {
              border-radius: 0;
              margin: 5px 0;
              width: 80px;
              height: 70px;
            }
          }

          .info {
            position: relative;
            flex-shrink: 1;
            text-align: right;
            align-items: center;
            display: inline-block;
            padding: 0 5px;
            margin-right: 5px;
            min-height: 80px;
            width: 100%;

            .title {
              display: inline-flex;
              margin: 0;
              position: relative;
              width: 100%;

              a {
                display: grid;
                padding: 0;
                margin: 0;
                width: 88%;
              }

              h2,
              h3 {
                line-height: 1.4;
                font-size: 16px;
                margin-bottom: 0;
                font-weight: bold;
                @extend %transition;
              }
              .trash {
                margin-left: 20px;
                padding: 0;
                margin: 0;
                height: initial;
                box-shadow: none;
                border: none;
                height: 0px;
                position: absolute;
                left: 0;
                top: 15px;
                width: initial;
                svg {
                  margin-left: 5px;
                  font-size: 22px;
                }
              }
            }

            .amount-box {
              margin: 5px 0 0 0;
              justify-content: right !important;

              .amount-div {
                display: inline-flex;
                align-items: center;
                margin-bottom: 8px;
              }

              .amount {
                margin: 0 0 0 10px !important;
                font-size: 13px;
              }

              .input-spinner {
                display: inline-block;
                margin-left: 10px;

                .input-group {
                  width: 80px;

                  .input-group-btn {
                    .btn {
                      border-radius: 0;
                      height: 20px;
                      box-shadow: none;
                      display: flex;
                      align-items: center;
                      padding: 0;
                      margin: 0;

                      .glyphicon {
                        height: 20px;
                        padding: 0 6px !important;

                        svg {
                          font-size: 9px;
                          padding: 0;
                        }
                      }
                    }
                  }

                  .form-control {
                    height: 20px;
                    padding: 7px;
                    text-align: center;
                    font-size: 12px;
                  }
                }
              }
            }
            .price {
              display: flex;
              align-items: initial;
              margin-bottom: 0;
              height: initial;
              min-height: 20px;
              div {
                display: inline-flex;
                flex-shrink: 0;

                span {
                  margin-left: 5px;
                }
              }
              .discount {
                font-size: 10px;
              }

              .main-price {
                text-decoration: inherit;
                padding: 0 0 0 10px;
                font-weight: normal;
                display: grid;
                span {
                  font-size: 12px;
                  font-weight: bold;
                }

                @media (max-width: $maxSm) {
                  padding: 0 0 0 10px;
                }
                @media (max-width: $minCsm) {
                  padding: 0 0 0 3px;
                  span {
                    font-size: 11px;
                  }
                }
              }

              .total {
                position: absolute;
                left: 0;
                span {
                  font-size: 13px;
                  margin-left: 5px;
                }
                @media (max-width: $minCsm) {
                  span {
                    font-size: 11px;
                  }
                }
              }
              .percent {
                position: initial;
                overflow: hidden;
                z-index: 10;
                font-size: 12px;
                width: auto;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 0 7px;
                height: 25px;
                border-radius: 12px;
                font-weight: bold;
                margin-bottom: 0;
                margin-right: 10px;
                @media (max-width: $maxSm) {
                  margin-right: 0;
                }
                @media (max-width: $minCsm) {
                  font-weight: normal;
                  height: 20px;
                  padding: 0 5px;
                  font-size: 10px;
                }
              }
            }
          }
        }

        @media (max-width: $maxSm) {
          .info {
            .title {
              a {
                min-height: 50px;
                max-height: 50px;
                h2 {
                  font-weight: normal;
                }
              }
            }
            .amount-box {
              .price {
                .main-price {
                  span {
                    font-size: 10px;
                  }
                  .discount {
                    font-size: 10px;
                  }
                }
                .total {
                  span {
                    font-size: 11px;
                  }
                }
              }
            }
          }
        }
        &:hover {
          @extend %box-shadow-2;
        }
      }
    }
    @media (max-width: $maxSm) {
      height: 65vh;
    }
  }
  .footer-cart {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 135px;
    padding: 10px 15px;
    z-index: 15;
    div {
      text-align: center;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      span {
        font-size: 14px;
        strong {
          font-size: 16px;
        }
      }
    }

    a {
      height: 45px;
      width: 100%;
      border-radius: 10px;
      background-color: #000;
      color: #fff;
    }
  }
  @media (max-width: $maxSm) {
    width: 85%;
    left: -575px;
  }
  @media (max-width: $max460) {
    width: 100%;
  }

  .cartbar.active {
    left: 0;
  }
}
.cartbar.active {
  left: 0;
}

.overlay {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(51, 51, 51, 0.7);
  z-index: 1050;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.overlay.active {
  display: block;
  opacity: 1;
  @media (max-width: $max460) {
    display: none !important;
  }
}

.ltr {
  .shoping-cart {
    margin-right: initial;
    margin-left: 0;

    a {
      .label {
        right: initial;
        left: 7px;
      }
    }
  }

  .cartbar {
    left: initial;
    right: -450px;
    text-align: right;

    .cart-dismiss {
      right: initial;
      left: 10px;
    }
    .shoping-items {
      li {
        .item {
          section {
            .img-box {
              float: left;
            }

            .info {
              margin-right: initial;
              margin-left: 5px;

              .title {
                .trash {
                  margin-right: initial;
                  margin-left: 20px;
                  right: 0;
                  left: initial;
                  svg {
                    margin-left: initial;
                    margin-right: 5px;
                  }
                }
              }

              .amount-box {
                justify-content: left !important;
                .amount {
                  margin: 0 10px 0 0 !important;
                }

                .input-spinner {
                  margin-left: initial;
                  margin-right: 10px;
                }
              }
              .price {
                div {
                  span {
                    margin-left: initial;
                    margin-right: 5px;
                  }
                }

                .main-price {
                  text-decoration: inherit;
                  padding: 0 10px 0 0;
                  @media (max-width: $minCsm) {
                    padding: 0 3px 0 0;
                  }
                }

                .total {
                  left: initial;
                  right: 0;
                  span {
                    margin-left: initial;
                    margin-right: 5px;
                  }
                }
                .percent {
                  margin-right: initial;
                  margin-left: 10px;
                  @media (max-width: $maxSm) {
                    margin-right: initial;
                    margin-left: 0;
                  }
                }
              }
            }
          }
        }
      }
    }
    @media (max-width: $maxSm) {
      left: initial;
      right: -575px;
    }
  }
  .cartbar.active {
    left: initial;
    right: 0;
  }
}
