// =============================================================================
// Cart Table
// =============================================================================

& {
  .entry-title {
    font-size: rem-calc(23);
    margin-bottom: rem-calc(32);
    margin-top: rem-calc(8);
    @include breakpoint(large) {
      margin-top: rem-calc(32);
      margin-bottom: rem-calc(72);
    }
  }

  .woocommerce {
    font-size: 0;

    .woocommerce-cart-form {
      display: inline-block;
      vertical-align: top;
      font-size: rem-calc(13);
      width: 100%;
      position: relative;
      @include breakpoint(large) {
        width:60%;
      }
      @include breakpoint(xlarge) {
        width: 60%;
      }
      @include breakpoint(medium down) {
        display: block;
      }

      .shop_table {
        @include breakpoint(medium down) {
          margin-bottom: rem-calc(64);
        }
      }

      input:not(.button) {
        background: none;
        box-shadow: none;

        &:focus {
          background: none;
        }
      }

      thead {
        th {
          font-size: rem-calc(14);
          font-weight: 400;
          padding: rem-calc(15);
          border-bottom: solid 1px v(site-border-color);
          @include breakpoint(medium-ex down) {
            display: none;
          }
        }
      }

      td {
        padding: rem-calc(16);
        @include breakpoint(medium-ex down) {
          padding: rem-calc(16);
        }
        @include breakpoint(medium down) {
          display: block;
          width: 100%;
          text-align: left;
          padding: rem-calc(16) 0;
        }
        &.product-price {
          .woocommerce-Price-amount {
            font-size: rem-calc(16);
            font-weight: bold;
            color: v(site-heading-color);
          }
        }
        &.product-quantity {
          text-align: center;
          .quantity {
            margin: 0 auto;
          }
        }
      }

      tr {
        &.cart_item {
          position: relative;

          .product-remove {
            @include breakpoint(medium down) {
              position: absolute;
              right: -10px;
            }
            @include breakpoint(large) {
              width: 14px;
            }

            a.remove {
              font-size: 0;
              display: block;
              @include breakpoint(large) {
                margin-left: -10px;
                padding: 10px;
                margin-right: rem-calc(6);
                @include rotate_close_btn();
              }
              @include breakpoint(medium down) {
                width: 20px;
                height: 20px;
                margin-right: 0;
                float: right;
                padding: 5px;
                margin-top: -4px;
                margin-right: 5px;
              }

              &:after {
                @include nova_icon('\ea13');
                @include global-transition();
                font-size: rem-calc(18);
              }
            }
          }

          .product-thumbnail {
            @include breakpoint(medium only) {
              width: 100%;
            }
            @include breakpoint(large) {
              width: 120px;
              padding-right: 16px;
              min-width: 78px;
            }

            .wp-post-image {
              transition: transform 0.3s ease-in-out, transform 0.3s ease-in-out;
              will-change: transform;
            }

            &:hover {
              @include breakpoint(large) {
                .wp-post-image {
                  transform: scale3d(0.98, 0.98, 0.98);
                }
              }
            }

            a {
              display: block;
              width: 100%;
              @include breakpoint(medium) {
                width: 90px;
              }
            }
          }

          .product-name {
            @include breakpoint(medium down) {
              display: table;
              width: 100%;
              text-align: left;
              margin: 1.1rem 0;
              vertical-align: middle;
              position: relative;
            }

            &:before {
              @include breakpoint(medium down) {
                content: attr(data-title);
                width: 50%;
                // float: left;
                display: table-cell;
                vertical-align: middle;
              }
            }
            @include breakpoint(large) {
              padding-right: rem-calc(30);
            }

            a {
              display: block;
              font-size: rem-calc(14);

              @include breakpoint(medium down) {
                float: right;
                text-align: right;
                display: block;
              }
              @include breakpoint(large) {
                margin-right: 72px;
              }
              &.remove {
                display: inline-block;
                font-size: rem-calc(10);
                text-transform: uppercase;
                text-decoration: underline;
                margin-top: rem-calc(30);
              }
            }

            dl.variation {
              font-size: rem-calc(12);
              @include breakpoint(medium down) {
                text-align: right;
                width: 100%;
                display: block;
                float: right;
                margin-bottom: 0;
              }
              @include breakpoint(large) {
                margin-top: 8px;
                margin-bottom: 0;
              }

              dt {
                font-weight: normal;
                @include breakpoint(medium down) {
                  margin-bottom: 0;
                  margin-top: 10px;
                }
                @include breakpoint(large) {
                  margin: 0 5px 0 0;
                  float: left;
                  clear: both;
                }
              }

              dd {
                @include breakpoint(large) {
                  margin: 0 5px 0 0;
                  float: left;
                }
              }
            }
          }

          .product-price {
            @include breakpoint(medium down) {
              display: flex;
              align-items: center;
            }

            &:before {
              @include breakpoint(medium down) {
                content: attr(data-title);
                width: 50%;
              }
            }

            .amount {
              @include breakpoint(medium down) {
                text-align: right;
                width: 50%;
              }
            }
          }

          .product-quantity {
            @include breakpoint(medium down) {
              display: flex;
              align-items: center;
            }

            &:before {
              @include breakpoint(medium down) {
                content: attr(data-title);
                width: 50%;
              }
            }

            .quantity {
              position: relative;
              width: 46px;
              height: 46px;

              input {
                height: 46px;
                font-size: rem-calc(16);
                border: solid 1px;
                padding: 0;
              }

              .qty-button {
                display: none;
                position: absolute;
                top: 0;
                left: 0;
                width: 46px;
                height: 46px;
                text-align: center;
                line-height: 46px;
                color: v(site-heading-color);
                font-size: rem-calc(20);
                cursor: pointer;
                &.inc {
                  left: auto;
                  right: 0;
                }
              }
            }
          }

          .product-subtotal {
            font-size: rem-calc(16);
            font-weight: bold;
            color: v(site-heading-color);
            @include breakpoint(medium down) {
              display: flex;
              align-items: center;
              margin-bottom: rem-calc(24);
            }
            @include breakpoint(large) {
              padding-right: rem-calc(27);
              text-align: left;
            }

            &:before {
              @include breakpoint(medium down) {
                content: attr(data-title);
                width: 50%;
              }
            }

            .amount {
              @include breakpoint(medium down) {
                text-align: right;
                width: 50%;
              }
            }

            small {
              display: none;
            }
          }
        }

        &:not(.cart_item) {
          border-bottom: 0;

          td.actions {
            padding-top: rem-calc(38);
            padding-bottom: 0;
            position: relative;

            button {
              outline: none;
            }

            .coupon {
              display: flex;
              align-items: center;
              position: relative;
              margin-bottom: rem-calc(16);

              &:before {
                content: "";
                width: 0;
                height: 1px;
                display: block;
                position: absolute;
                bottom: 0;
                transition: width ease 0.15s;
              }

              &.bottom_line {
                &:before {
                  width: 100%;
                }
              }
              @include breakpoint(large) {
                width: 50%;
                position: relative;
                margin-bottom: 0;
              }

              label {
                display: none;
              }

              #coupon_code {
                font-size: rem-calc(14);
                line-height: rem-calc(16);
                border-width: 0 0 1px 0;
                width: 100%;
                margin-bottom: 0;
                padding-right: 40%;
                @include breakpoint(medium down) {
                  padding-left: 0;
                }
              }

              button[name="apply_coupon"] {
                background: none;
                padding: 0;
                width: auto;
                position: absolute;
                right: 15px;
                top: 50%;
                color: v(site-heading-color);
                font-weight: 500;
                transform: translateY(-50%);
                height: 48px;
                outline: none;
                text-transform: uppercase;

                &:hover {
                  color: v(site-accent-color);
                }
                @include breakpoint(medium down) {
                  right: 0;
                  bottom: 50%;
                  margin-bottom: -18px;
                  padding-right: 0;
                  height: inherit;
                  line-height: inherit;
                }
              }
            }

            button[name="update_cart"] {
              width: auto;
              background: none;
              color: v(site-heading-color);
              padding: 0;
              outline: none;
              padding: rem-calc(15);
              border: solid 1px;
              text-transform: uppercase;

              &:hover {
                background-color: v(site-accent-color);
                color: #fff;
                border-color: transparent;
              }
              @include breakpoint(large) {
                position: absolute;
                top: calc(50% + 38px);
                margin-top: -19px;
                transform: translateY(-50%);
                right: 0;
              }
            }
          }
        }
      }
    }
  }
}
