.rightpanel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    background-color: #e9e9e9;
    border-left: solid 1px #eeeeee;
    max-width: 28rem;
    width: 100%;
    background: #fff;
    color: #000;
    display: flex;
    flex-direction: column;
    z-index: 4000;
    transition: .3s ease-out;
    transform: translateX(100%);
}

    .rightpanel .basketheading {
        flex-shrink: 0;
        padding: calc(var(--spacing) * 4);
        border-bottom: solid 1px var(--border);
    }

        .rightpanel .basketheading h2 {
            margin: 0;
            padding: 0;
            font-size: var(--text-base);
        }

        .rightpanel .basketheading svg {
            width: calc(var(--spacing) * 6);
            height: calc(var(--spacing) * 6);
            vertical-align: middle;
            color: var(--foreground);
        }

    .rightpanel .basketitems {
        border-bottom: solid 1px var(--border);
        padding: calc(var(--spacing) * 4);
        flex-grow: 1;
        overflow-y: auto;
    }

        .rightpanel .basketitems h3 {
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            margin: 0;
            padding: calc(var(--spacing) * 4);
            padding-top: 0;
        }

        .rightpanel .basketitems .emptybasket {
            font-size: var(--text-base);
            line-height: var(--text-base--line-height);
            padding: calc(var(--spacing) * 6);
        }

        .rightpanel .basketitems .basketitem {
            border: solid 1px var(--border);
            margin-bottom: calc(var(--spacing) * 4);
            padding: calc(var(--spacing) * 4);
        }

            .rightpanel .basketitems .basketitem:last-child {
                margin-bottom: 0;
            }


            .rightpanel .basketitems .basketitem h3, .rightpanel .basketitems .basketitem h4, .rightpanel .basketitems .basketitem i {
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                margin: 0;
                padding: 0;
            }

            .rightpanel .basketitems .basketitem h4 {
                padding: 0;
            }

            .rightpanel .basketitems .basketitem a svg {
                width: calc(var(--spacing) * 4);
                height: calc(var(--spacing) * 4);
                color: var(--primary);
            }

                .rightpanel .basketitems .basketitem a svg.remove {
                    color: red;
                }

            .rightpanel .basketitems .basketitem i {
                color: red;
                padding: 0;
            }

            .rightpanel .basketitems .basketitem p {
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                color: var(--muted-foreground);
                padding: calc(var(--spacing));
                margin: 0;
            }

                .rightpanel .basketitems .basketitem p.description {
                    font-size: var(--text-xs);
                    line-height: var(--text-xs--line-height);
                    padding: 0;
                    margin: 0;
                    margin-bottom: calc(var(--spacing));
                }

                .rightpanel .basketitems .basketitem p.details {
                    font-weight: bold;
                }

                .rightpanel .basketitems .basketitem p.lowocc {
                    color: var(--primary);
                    font-size: var(--text-xs);
                    line-height: var(--text-xs--line-height);
                    text-align: center;
                    padding-left: calc(var(--spacing) * 8);
                    padding-right: calc(var(--spacing) * 8);
                }

                    .rightpanel .basketitems .basketitem p.lowocc.warning {
                        color: var(--secondary-foreground);
                    }

                    .rightpanel .basketitems .basketitem p.lowocc.alert {
                        color: var(--color-red-50);
                    }

            .rightpanel .basketitems .basketitem hr {
                color: var(--border);
                padding: 0;
                margin: calc(var(--spacing) * 2);
            }


    .rightpanel .basketfooter {
        flex-shrink: 0;
        padding: calc(var(--spacing) * 4);
    }

        .rightpanel .basketfooter p {
            padding: calc(var(--spacing));
            margin: 0;
            color: var(--primary);
            font-size: var(--text-lg);
            line-height: var(--text-lg--line-height);
        }

            .rightpanel .basketfooter p.totalcost {
                font-size: var(--text-2xl);
                line-height: var(--tw-leading, var(--text-2xl--line-height));
                color: var(--primary);
            }

    .rightpanel .basketbutton {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
        border-radius: var(--radius-sm);
        margin: 0;
        --tw-font-weight: var(--font-weight-medium);
        font-weight: var(--font-weight-medium);
        padding-inline: calc(var(--spacing));
        margin-top: calc(var(--spacing) * 4);
        margin-bottom: calc(var(--spacing) * 4);
    }

    .rightpanel .clearcart {
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        color: var(--muted-foreground);
    }

        .rightpanel .clearcart:hover {
            color: var(--destructive);
        }