@import '../../../../_common/scss/_main';

.OrderSummary {
    line-height: $primary-line-height;
    margin: 0 0 $gutter-large 0;
    padding-bottom: $gutter;

    &__buttons {
        display: flex;
        flex-direction: column;
        width: 300px;
        margin-top: $gutter-small;

        &__reorder,
        &__recurring {
            flex: 100%;
            text-align: center;

            &__button {
                display: block;
                width: 100%;
                margin-bottom: $gutter-small;
            }

            &__disclaimer {
                font-size: $font-size-small;
                color: $gray-primary-text;
            }
        }

        &__recurring {
            @include desktop {
                margin-left: $gutter-large;
            }
        }

        &.FixedCTA {
            padding-bottom: $gutter;
        }

        @include desktop {
            flex-direction: row;
        }
    }

    &--gifting {
        background: url('https://s3.amazonaws.com/s3.delivery.com/gifts/gifting/stars_wide.png')
            top right no-repeat white;

        @media (max-width: $site-width-mobile-large) {
            background: url('https://s3.amazonaws.com/s3.delivery.com/gifts/gifting/stars_narrow.png')
                top right no-repeat white;
        }
    }

    &__header {
        &__buttons {
            margin-left: $gutter-large;
        }

        &__title {
            display: flex;
            align-items: center;
            flex-direction: column;

            @include tablet {
                flex-direction: row;
            }

            &__gift {
                width: 22px;
                height: 24px;
                margin-left: $gutter;
                margin-top: -#{$gutter-small};
            }
        }

        &__subtext {
            margin-top: $gutter;
        }

        &__disclaimer {
            color: $primary-text-color;
        }
    }

    &__status {
        margin: $gutter-large $gutter-large $gutter;
        padding: $gutter-large;
        text-align: center;

        &--error {
            background-color: $error-msg-background;
            color: $error-msg-font;
        }
        &--warning {
            background-color: $alert-background;
            color: $gray-primary-text;
        }
    }

    &__cartItem {
        height: auto;
        padding: $gutter-large $gutter-large 0;
        margin-bottom: $gutter-large;
        color: $primary-text-color;

        &__item {
            display: flex;

            &__quantity {
                width: 20px;
            }

            &__name {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            &__total {
                min-width: 55px;
                text-align: right;
            }
        }

        &__details {
            margin-top: 0;
            padding-left: $gutter-large;
            color: $secondary-text-color;
            list-style: none;

            &__instructions {
                line-height: $primary-line-height;
                color: $legal-text-color;
            }
        }
    }

    &__instructions {
        color: $legal-text-color;
        font-style: italic;
        word-wrap: break-word;
        padding: $gutter-large $gutter-large 0;
        text-align: left;
        margin-bottom: 0;
    }

    &__charges {
        padding: $gutter-large $gutter-large 0 0;
        text-align: right;
        margin: 0 0 $gutter-large auto;
        max-width: 260px;
        list-style: none;

        @include tablet-small-up {
            max-width: 300px;
        }

        &__charge,
        &__total {
            margin-bottom: $gutter;
            padding: 0;
            display: flex;
            justify-content: space-between;
            width: 100%;
            box-sizing: border-box;

            &__label {
                text-align: left;
            }
            &__value {
                text-align: right;
                position: relative;
            }
            &__Header {
                padding: 0;
            }
        }

        &__charge {
            font-size: $font-size-main;
            color: $secondary-text-color;
            background: $module-background-contrast;

            &__value,
            &__Accordion__sub__value,
            &__Accordion__header__value {
                font-weight: bold;

                &--discount {
                    color: $action-color;
                }
            }
            &__Accordion {
                width: 100%;
                &__header {
                    list-style: none;
                    padding-left: 0;
                    width: 100%;
                    &__name {
                        margin-bottom: $gutter;
                    }
                    &__name {
                        text-align: left;
                        color: $primary-color;
                        font-weight: 600;
                    }
                    &__charge {
                        display: flex;
                        justify-content: space-between;
                    }
                    &__label {
                        padding-left: $gutter;
                    }
                }
                &__Header.Accordion__Header {
                    padding: 0;
                    @media (max-width: $site-width-small-portrait) {
                        // override media in Accordion.scss
                        padding: 0;
                    }
                }
                &__body {
                    list-style: none;
                    padding: 0;
                    &__charge {
                        display: flex;
                        justify-content: space-between;
                        width: calc(100% - #{$gutter-large});
                        margin: $gutter auto;
                        &__label {
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                            padding-right: $gutter;
                            text-align: left;
                        }
                    }
                    &__container {
                        background: $module-background;
                        padding: 1px;
                        margin-bottom: $gutter;
                    }
                }
                &__Arrow {
                    &.Accordion__Arrow {
                        padding: 0;
                        top: $gutter;
                    }
                    &__Icon.icon-arrow {
                        font-weight: bold;
                    }
                }
            }
        }

        &__total {
            font-weight: bold;
            font-size: $font-size-h2;
        }
    }

    // could refactor cart group items and cart individual items to be fully BEM
    &__cart, .OrderSummaryGroupItems {
        .CartGroupUserItemsHeader {
            background: none;
            font-weight: 600;
            padding: $gutter-large $gutter-large $gutter;
            &__Name {
                overflow: initial;
            }
        }

        .CartGroupParticipantAccordion {
            border-top: 1px solid $secondary-color-lighter;
            border-bottom: none;

            &__Header {
                padding-bottom: 0;
                &__Title {
                    font-weight: 600;
                    border-bottom: none;
                    padding: $gutter $gutter-large $gutter-large;
                    margin: 0 (-$gutter-large);
                }
                &__Summary {
                    padding: 0 0 $gutter-large $gutter-large;
                }
            }
            .Accordion {
                &__Header {
                    border-bottom: 1px solid $border-color-light;
                }
            }
        }

        .CartGroupItems__Subtotal {
            font-weight: 700;
            display: flex;
            justify-content: space-between;
            padding: 0 $gutter-large $gutter-large;
            border-bottom: 1px solid $border-color-light;
        }
        .CartItem {
            padding: 0 $gutter-large $gutter-large $gutter-extra-large;
            &__Options {
                color: $secondary-text-color;
            }
            &__Quantity {
                flex: 0 0 20px;
            }
            &__Quantity,
            &__Name.h4 {
                color: $primary-text-color;
            }

            &__Details {
                .CartItem__Left__Name {
                    &:hover {
                        text-decoration: none;
                        cursor: default;
                    }
                }
            }
        }
        &.CartItems__Items {
            padding-top: $gutter-large;
            border-bottom: 1px solid $border-color-light;
            .CartItem {
                padding-left: $gutter-large;
                padding-bottom: $gutter;
            }
        }
        .BagSummary {
            padding: $gutter $gutter-large;
        }
        .BagSummary__List .BagSummaryLineItem {
            padding-left: 0;
        }
    }
}

.Accordion--Visible .OrderSummary__charges__charge__Accordion {
    &__header__charge {
        display: none;
    }
}

.Accordion--Visible {
    .CartGroupParticipantAccordion__Header__Summary {
        display: none;
    }
}