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

.popupCart {
    display: flex;
    padding: consts.$gap-medium;
    gap: consts.$gap-medium;
    flex-direction: column;
    width: 710px;
    
    @include mixins.media(md) {
        width: 582px;
    }

    @include mixins.media(sm) {
        width: 100vw;
        height: 100vh;
    }
    & > .head {
        display: flex;
        justify-content: space-between;
        color:  consts.$schema-text-accent;

        & > .title {
            @include mixins.text('heading-5');
            text-transform: uppercase;
        }
    }

    & > .cartItem {
        display: flex;
        gap: consts.$gap-medium;

        .image {
            height: 100px;
            width: 100px;
        }

        & > .content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;

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

                & > .content {
                    display: flex;
                    gap: consts.$gap-tiny;
                    flex-direction: column;
                    flex: 1;
                    
                    & > .firstLine {
                        display: flex;
                        column-gap: consts.$gap-tiny;
                        justify-content: space-between;
                        // padding: consts.$gap-base;
                    
                        & > .title {
                            all: unset;
                            cursor: pointer;
                            @include mixins.text('text-4');
                        }
                    }

                    & > .secondaryLine {
                        display: flex;
                        gap: consts.$gap-tiny;
                        flex-wrap: wrap;
                        
                        @include mixins.text('text-5');

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

                            & > .title {
                                color: consts.$schema-text-secondary;
                            }

                            & > .hr {
                                color: consts.$schema-text-secondary;
                                &::before {
                                    content: '|';
                                }
                            }
                        }
                    }
                }

            }

            & > .amountAndPrice {
                display: flex;
                justify-content: space-between;

                & > .amountChose {
                    display: flex;
                    align-items: center;
                    column-gap: consts.$gap-tiny;
                    @include mixins.text('text-4');
                    
                    input {
                        all: unset;
                        display: block;
                        width: 2ex;
                    }
                }

                & > .price {
                    @include mixins.text('text-4-bold');
                }
            }
        }
    }

    & > .foot {
        display: flex;

        & > .backAndTotalPrice {
            display: flex;
            justify-content: space-between;
            gap: consts.$gap-tiny;
            flex: 1;
            align-items: flex-end;
            
            @include mixins.text('text-4');

            .totalPrice {
                display: flex;
                gap: consts.$gap-tiny;
                align-items: flex-end;

                .price {
                    @include mixins.text('text-1');
                }
            }

        }
    }
}