div.basket-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    z-index: 1499;
    display: none;
}

body:has(aside.basket.active) {
    overflow: hidden;

    div.basket-backdrop {
        display: block;
    }
}

aside.basket {
    --sidebarWidth: 500px;

    position: fixed;
    right: 0;
    bottom: 0;
    height: 100vh;
    max-width: var(--sidebarWidth);
    width: 100%;
    box-shadow: var(--default-shadow);
    background-color: white;
    padding: 18px;
    z-index: 1500;

    display: flex;
    flex-direction: column;
    gap: 22px;

    &:not(.active) {
        display: none;
    }

    div.top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        [data-close-sidebar] {
            cursor: pointer;
            border: none;

            svg {
                width: 30px;
                height: auto;
            }

            &:hover {
                svg {
                    fill: var(--colour-primary);
                }
            }
        }
    }

    div.items {
        flex-grow: 1;

        display: flex;
        flex-direction: column;
        gap: 11px;
        overflow: auto;
        height: 100%;

        div.empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 11px;
            height: 100%;

            svg {
                width: 100px;
                height: auto;
                fill: var(--colour-primary);
            }

            p {
                text-align: center;
                margin-top: 0;

                &.title {
                    margin-top: 22px;
                    font-size: 1.4rem;
                    font-weight: bold;
                }
            }
        }
    }
}

div.actions {
    display: flex;
    flex-direction: column;
    gap: 11px;

    a {
        text-align: center;
        padding-top: 11px;
        padding-bottom: 11px;
    }
}