@use '../consts.scss' as consts;
@use '../colors.scss' as colors;
@use '../mixins.scss' as mixins;

.cartItems {
    display: flex;
    flex-direction: column;
    gap: consts.$gap-medium;
    
    & > .cartItem {
        display: flex;
        column-gap: consts.$gap-base;
        & > .imageLink > .image {
            height: 100px;
            width: 100px;

            @include mixins.media(sm);
        }

        & > .item {
            display: flex;
            flex-direction: column;
            row-gap: consts.$gap-tiny;
            @include mixins.text('text-4');

            & > .title {
                // @include mixins.text('text-4');
            }

            & > .variantInfo {
                display: flex;
                column-gap: consts.$gap-tiny;    

                @include mixins.text('text-5');

                & > .title {
                    color: colors.$color-grey;
                }
            }
            & > .amountAndPrice {
                display: flex;
                row-gap: consts.$gap-tiny;
                justify-content: space-between;

                & > .aamount {

                }

                & > .price {
                    @include mixins.text('text-4-bold');
                    color: consts.$schema-text;
                }
            }
        }
    }

    & > .fancyBorder {
        margin: 0;
        // margin-top: consts.$gap-medium;
    }
}