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

.cart {
    &__header {
        padding-bottom: calc-rem(20px);
        border-bottom: 1px solid rgba(var(--color-border), 1);
        margin-bottom: calc-rem(15px);

        h2 {
            font-size: clamp-font(12px, 14px);
            text-transform: none;
            font-variation-settings: var(--font-variation-settings-body);
            display: flex;
            align-items: center;
            margin-bottom: 0;

            .badge {
                margin-left: calc-rem(5px);
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(var(--color-primary), 1);
                width: calc-rem(18px);
                height: calc-rem(18px);
                top: -6px;
                right: -6px;
                border-radius: calc-rem(18px);
                font-size: calc-rem(9px);
                font-weight: bold;
                color: #FFF;
            }
        }
    }

    &__summary {
        position: sticky;
        top: calc-rem(90px);

        dl {
            margin-bottom: calc-rem(25px);

            > div {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: calc-rem(10px);
                font-size: clamp-font(12px, 14px);

                &:last-child {
                    font-size: clamp-font(14px, 16px);
                    font-variation-settings: var(--font-variation-settings-bold);
                }
            }


        }


        dd {
            margin: 0;
        }
    }

    &__buttons {
        margin-bottom: calc-rem(30px);

        @include media-breakpoint-up(lg) {
            margin-bottom: 0;
        }

        a {
            display: flex;
            margin-bottom: calc-rem(5px);
        }
    }
}
