@use 'typography';
@use 'screen-breakpoints' as sb;

:host {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  border: 1px solid var(--color-senary);
  border-radius: 0.25rem;

  @include sb.bp-600w {
    flex-direction: column;
  }

  .main-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex: 1;

    .product-link {
      display: flex;
      align-items: center;

      .img-cont {
        border-radius: 0.25rem;
        background-color: var(--color-septenary);
        padding: 0.25rem;

        ec-product-image {
          width: 64px;
          height: 64px;

          @include sb.bp-400w {
            width: 32px;
            height: 32px;
          }
        }
      }

      .name {
        margin: 0 2rem 0 1rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .controls {
      display: flex;
      align-items: center;

      input[type='number'] {
        width: 6ch;
        margin: 0 0.5rem;

        @include sb.bp-600w {
          margin: 0;
        }
      }

      .quantity-btn {
        width: 4ch;

        @include sb.bp-600w {
          display: none;
        }
      }

      .remove-btn {
        margin-left: 1rem;
      }
    }
  }

  .price {
    width: 10ch;
    margin: 0 0.5rem 0 2rem;
    text-align: right;

    @include sb.bp-600w {
      width: 100%;
      margin: 0.5rem 0 0 0;
      padding-top: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      border-top: 1px solid var(--color-senary);
    }

    ec-price-tag {
      display: inline-block;
      --price-tag-color: var(--color-primary);
    }

    .total {
      background: var(--gradient-magenta-to-light-purple);
      -webkit-background-clip: text;
      background-size: 140%;
      background-clip: text;
      font-weight: 600;
      color: transparent;
    }
  }
}
