div[data-quantity-controls] {
    display: flex;

    button {
        &[data-button="minus"] {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        &[data-button="plus"] {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }

    input[name="quantity"], input[data-quantity-val]{
        width: 40px;
        text-align: center;
    }
}

#sidebar div.basket {
    div.empty {
        text-align: center;
        padding-top: 72px;

        img {
            filter: drop-shadow(var(--big-shadow));
            width: 125px;
            margin-bottom: 18px;
            margin-left: auto;
            margin-right: auto;
        }

        p {
            margin-top: 18px;
        }

        div.next-event {
            margin-top: 72px;
            text-align: left;

            a {
                margin-top: 18px;
                width: 50%;
                margin-left: auto;
                margin-right: auto;
            }
        }
    }

    div.items {
        margin-top: 36px;
        position: relative;

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

        div.item {
            div.spaces {
                display: flex;
                gap: 18px;
                margin-top: 9px;
                margin-bottom: 9px;
                
                span.space {
                    background-color: var(--colour-silver);
                    border-radius: 3px;
                    padding-left: 9px;
                    padding-right: 9px;
                }
            }

            p.total {
                font-weight: bold;
                font-size: 1.1rem;
            }

            form[data-basket-controls] {
                margin-top: 18px;
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                position: relative;

                div.buttons {
                    display: flex;
                    gap: 18px;

                    svg {
                        width: 20px;
                        fill: white;

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

    div.discounting {
        margin-top: 18px;

        p.title {
            font-family: 'Bubblegum Sans';
        }

        > form {
            display: flex;
            
            border: solid 2px var(--colour-phoebe);
            border-radius: 11px;

            input {
                border-top-left-radius: 9px;
                border-bottom-left-radius: 9px;
                height: 50px;
                flex: 1;
            }

            button {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }

        div.applied-discounts {
            form {
                margin-top: 18px;
                display: flex;
                gap: 18px;
                align-items: center;

                svg {
                    width: 20px;
                    fill: white;

                    &.remove {
                        cursor: pointer;
                        
                        &:hover {
                            fill: var(--colour-primary);
                        }
                    }
                }

                div.label {
                    flex: 1;
                    
                    p {
                        font-weight: bold;
                    }
                }
            }
        }
    }

    div.prompt {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5);
        display: none;

        > div.card {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 95%;
            transform: translate(-50%, -50%);
            padding: 18px;
            box-shadow: var(--big-shadow);

            div.error {
                margin-top: 22px;
                display: none;
            }

            form {
                display: flex;
                margin-top: 22px;
                
                border: solid 2px var(--colour-phoebe);
                border-radius: 11px;
    
                input {
                    border-top-left-radius: 9px;
                    border-bottom-left-radius: 9px;
                    height: 50px;
                    flex: 1;
                }
    
                button {
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                }
            }
        }
    }

    div.totals {
        display: flex;
        flex-direction: column;
        gap: 9px;

        > div {
            display: flex;
            justify-content: space-between;

            &.total {
                p:last-child {
                    font-weight: bold;
                    font-size: 1.2rem;
                }
            }
        }
    }

    a.button.success {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

div.ticket {
    max-width: 400px;
    width: 100%;

    form[data-basket-controls] {
        margin-top: 18px;

        div.addons {
            margin-bottom: 18px;
        }

        div.controls {
            display: flex;
            justify-content: space-between;
        }
    }
}

div.card.summer-pass {
    margin: 18px;
    background-color: #77c7ec;
    background-size: contain;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px;
    color: black;

    img {
        width: 50px;
    }

    > div {
        p {
            font-size: small;
        }

        form {
            flex-direction: column;
            gap: 9px;
            align-items: flex-end !important;

            div.input {
                margin-top: 0 !important;
            }
        }
    }
}

form[data-basket-controls] {
    position: relative;

    div.loader {
        display: none;
    }

    &.loading {
        position: relative;

        div.loader {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            content: ' ';
            z-index: 1;
            padding: 22px;

            svg {
                fill: white !important;
                width: 30px !important;
                margin-top: 0 !important;
            }
        }
    }
}