@use "../common/utils" as *;
@use "../common/mixins" as *;

.cart-item {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: calc-rem(15px);
    border-bottom: 1px solid rgba(var(--color-border), 1);
    margin-bottom: calc-rem(15px);

    &__left {
        grid-column: span 3;
        display: flex;
        justify-content: flex-start;
        gap: calc-rem(15px);
    }

    &__image {
        min-width: calc-rem(75px);

        img {
            width: calc-rem(75px);
            height: calc-rem(75px);
            object-fit: contain;
            border-radius: calc-rem(5px);
            border: 1px solid rgba(var(--color-border), 1);
        }
    }

    &__details {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        width: 100%;
        height: 100%;
        align-items: flex-start;

        h4 {
            font-size: clamp-font(12px, 14px);
            margin-bottom: 0;
            font-weight: var(--font-weight-medium);
            font-family: var(--font-family-body);
            text-transform:none;
            line-height: 1.2;
        }

        p {
            //display: none;
            font-size: clamp-font(10px, 12px);
            color: rgba(var(--color-secondary), 0.6);
            margin: calc-rem(5px 0);
        }

        .quantity {
            margin-top: calc-rem(10px);
        }
    }

    &__right {
        grid-column: span 1;
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: calc-rem(10px);
    }

    &__delete {
        svg {
            width: calc-rem(16px);
            height: calc-rem(16px);
            object-fit: contain;

            path {
                stroke: rgba(var(--color-secondary), .4);
                transition: stroke .2s ease;
            }
        }

        &:hover {
            svg path {
                stroke: rgba(var(--color-secondary), 1);
                transition: stroke .2s ease;
            }
        }
    }
}
