<commit_before>@import "cart-list-item-variables";

.cart-list-item {
    padding: $cart-list-item__padding;
    border-bottom: $cart-list-item__border-bottom;

    @include mq($screen-m) {
        display: flex;
    }

    &__left {
        display: flex;

        @include mq($screen-m) {
            flex-basis: 50%;
        }

        @include mq($screen-xl) {
            flex-basis: 60%;
        }
    }

    &__right {
        margin: $cart-list-item__right-margin;
        padding: $cart-list-item__right-padding;

        @include mq($screen-m) {
            display: flex;
            flex-basis: 50%;
            flex-wrap: wrap;
            align-content: space-between;
            margin: $cart-list-item__right-margin\@medium;
            padding: $cart-list-item__right-padding\@medium;
        }

        @include mq($screen-xl) {
            flex-basis: 40%;
        }
    }

    &__image {
        width: $cart-list-item__image-width;

        @include mq($screen-m) {
            width: $cart-list-item__image-width\@medium;
        }

        @include mq($screen-xl) {
            width: $cart-list-item__image-width\@x-large;
        }
    }

    &__content {
        flex-basis: $cart-list-item__content-flex-basis;
        padding: $cart-list-item__content-padding;

        @include mq($screen-m) {
            flex-basis: $cart-list-item__content-flex-basis\@medium;
        }

        @include mq($screen-xl) {
            flex-basis: $cart-list-item__content-flex-basis\@x-large;
            padding: $cart-list-item__content-padding\@x-large;
        }
    }

    &__name {
        font-family: $cart-list-item__name-font-family;
        font-size: $cart-list-item__name-font-size;
        font-weight: $cart-list-item__name-font-weight;
        line-height: $cart-list-item__name-line-height;
        text-transform: $cart-list-item__name-text-transform;
    }

    &__attribute {
        display: block;
        width: 100%;
        color: $cart-list-item__attribute-color;
    }

    &__label,
    &__price {
        color: $cart-list-item__label-color;
        line-height: $cart-list-item__label-line-height;
    }

    &__price {
        @include mq($screen-m) {
            font-size: $cart-list-item__price-font-size\@medium;
        }
    }

    &__label {
        @include mq($screen-m) {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            border: 0;
            clip: rect(0 0 0 0);
            overflow: hidden;
        }
    }

    &__details {
        @include mq($screen-m) {
            display: flex;
            flex-basis: 100%;
            align-items: flex-start;
        }
    }

    &__wrapper {
        @include mq($screen-m) {
            flex-basis: 40%;
        }

        @include mq($screen-xl) {
            flex-basis: 35%;
        }
    }

    &__qty {
        margin: $cart-list-item__qty-margin;

        @include mq($screen-m) {
            flex-basis: 20%;
        }

        @include mq($screen-xl) {
            flex-basis: 30%;
            padding: $cart-list-item__qty-padding\@x-large;
        }
    }

    &__input {
        width: $cart-list-item__input-width;
        height: $cart-list-item__input-width;
        appearance: textfield;

        @include mq($screen-xl) {
            width: 100%;
        }

        &::-webkit-inner-spin-button, // sass-lint:disable-line no-vendor-prefixes
        &::-webkit-outer-spin-button { // sass-lint:disable-line no-vendor-prefixes
            appearance: none;
            margin: 0;
        }
    }

    &__total {
        font-size: $cart-list-item__total-font-size;
        line-height: $cart-list-item__total-line-height;
        font-weight: $cart-list-item__total-font-weight;
    }

    &__actions {
        display: none;

        @include mq($screen-m) {
            display: flex;
            flex-basis: 100%;
            justify-content: flex-end;
            height: $cart-list-item__actions-height\@medium;
        }
    }

    &__action {
        background-color: $cart-list-item__action-background-color;

        &:first-child {
            margin-right: $cart-list-item__action-margin-right;
        }

        .cart-list__action-icon {
            fill: $cart-list-item__action-icon-fill;
            transition: $cart-list-item__action-icon-transition;
        }

        &:hover,
        &:focus {
            .cart-list__action-icon {
                fill: $cart-list-item__action-icon-fill-hover;
            }<commit_msg>57953 - Use mixin + fix class name to cart-list-item<commit_after>@import "cart-list-item-variables";

.cart-list-item {
    padding: $cart-list-item__padding;
    border-bottom: $cart-list-item__border-bottom;

    @include mq($screen-m) {
        display: flex;
    }

    &__left {
        display: flex;

        @include mq($screen-m) {
            flex-basis: 50%;
        }

        @include mq($screen-xl) {
            flex-basis: 60%;
        }
    }

    &__right {
        margin: $cart-list-item__right-margin;
        padding: $cart-list-item__right-padding;

        @include mq($screen-m) {
            display: flex;
            flex-basis: 50%;
            flex-wrap: wrap;
            align-content: space-between;
            margin: $cart-list-item__right-margin\@medium;
            padding: $cart-list-item__right-padding\@medium;
        }

        @include mq($screen-xl) {
            flex-basis: 40%;
        }
    }

    &__image {
        width: $cart-list-item__image-width;

        @include mq($screen-m) {
            width: $cart-list-item__image-width\@medium;
        }

        @include mq($screen-xl) {
            width: $cart-list-item__image-width\@x-large;
        }
    }

    &__content {
        flex-basis: $cart-list-item__content-flex-basis;
        padding: $cart-list-item__content-padding;

        @include mq($screen-m) {
            flex-basis: $cart-list-item__content-flex-basis\@medium;
        }

        @include mq($screen-xl) {
            flex-basis: $cart-list-item__content-flex-basis\@x-large;
            padding: $cart-list-item__content-padding\@x-large;
        }
    }

    &__name {
        font-family: $cart-list-item__name-font-family;
        font-size: $cart-list-item__name-font-size;
        font-weight: $cart-list-item__name-font-weight;
        line-height: $cart-list-item__name-line-height;
        text-transform: $cart-list-item__name-text-transform;
    }

    &__attribute {
        display: block;
        width: 100%;
        color: $cart-list-item__attribute-color;
    }

    &__label,
    &__price {
        color: $cart-list-item__label-color;
        line-height: $cart-list-item__label-line-height;
    }

    &__price {
        @include mq($screen-m) {
            font-size: $cart-list-item__price-font-size\@medium;
        }
    }

    &__label {
        @include mq($screen-m) {
            @include visually-hidden();
        }
    }

    &__details {
        @include mq($screen-m) {
            display: flex;
            flex-basis: 100%;
            align-items: flex-start;
        }
    }

    &__wrapper {
        @include mq($screen-m) {
            flex-basis: 40%;
        }

        @include mq($screen-xl) {
            flex-basis: 35%;
        }
    }

    &__qty {
        margin: $cart-list-item__qty-margin;

        @include mq($screen-m) {
            flex-basis: 20%;
        }

        @include mq($screen-xl) {
            flex-basis: 30%;
            padding: $cart-list-item__qty-padding\@x-large;
        }
    }

    &__input {
        width: $cart-list-item__input-width;
        height: $cart-list-item__input-width;
        appearance: textfield;

        @include mq($screen-xl) {
            width: 100%;
        }

        &::-webkit-inner-spin-button, // sass-lint:disable-line no-vendor-prefixes
        &::-webkit-outer-spin-button { // sass-lint:disable-line no-vendor-prefixes
            appearance: none;
            margin: 0;
        }
    }

    &__total {
        font-size: $cart-list-item__total-font-size;
        line-height: $cart-list-item__total-line-height;
        font-weight: $cart-list-item__total-font-weight;
    }

    &__actions {
        display: none;

        @include mq($screen-m) {
            display: flex;
            flex-basis: 100%;
            justify-content: flex-end;
            height: $cart-list-item__actions-height\@medium;
        }
    }

    &__action {
        background-color: $cart-list-item__action-background-color;

        &:first-child {
            margin-right: $cart-list-item__action-margin-right;
        }

        .cart-list-item__action-icon {
            fill: $cart-list-item__action-icon-fill;
            transition: $cart-list-item__action-icon-transition;
        }

        &:hover,
        &.focus-visible {
            .cart-list-item__action-icon {
                fill: $cart-list-item__action-icon-fill-hover;
            }
{'fraction_non_alphanumeric': 0.1360400444938821, 'fraction_numerical': 0.008008898776418243, 'mean_word_length': 1.592560553633218, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4629390', 'n_tokens_mistral': 3050, 'n_tokens_neox': 2861, 'n_words': 410}