// Use data attributes to reduce chance of selector collisions

@mixin imminent-choice {
    background-color: yellow;
    @at-root body.theme-dark #{&} {
        background-color: chocolate;
    }
}
[data-cpuserscript-one-click-vtc] {
    position: absolute;
    margin-top: 24px;
    left: -250px;
    width: 240px;

    [data-close-reason-id] {
        margin-bottom: 10px;
        padding: 5px;
        &:hover {
            @include imminent-choice;
        }
    }
    // When OK button is hovered, change style of its reason on the left:
    div:hover + [data-close-reason-id] {
        background-color: lime;
        @at-root body.theme-dark #{&} {
            background-color: green;
        }
    }
    > :nth-child(4) {
        padding: 5px;
    }
    // Select all close texts and OK buttons:
    > :nth-child(2),
    > :nth-child(3),
    > :nth-child(5) > *:not(input),
    > :nth-child(5) ~ *:not(:last-child) {
        cursor: pointer;
    }
    > :nth-child(5) {
        margin-left: 20px;
    }
    @mixin okButton($emSize) {
        border: 1px solid var(--black);
        float: right;
        visibility: hidden;
        width: calc(#{$emSize}em + 15px);
        height: calc(#{$emSize}em + 15px);
        text-align: center;
        vertical-align: middle;
        line-height: calc(#{$emSize}em + 15px);
    }
    > div:not(:last-child) > div:nth-child(odd) {
        @include okButton(0.75);
    }
    > div:nth-child(even):not(:last-child) {
        @include okButton(1);
    }

    // Container for "Downvote when voting to close" button options:
    > div:last-child {
        visibility: hidden;
        text-align: center;
        > div {
            display: flex;
            justify-content: space-around;
            > div {
                padding: 0 5px;
                border: 1px solid var(--black);
                cursor: pointer;
                user-select: none;
                &[data-selected-option] {
                    // Dark blue in light theme, light blue in dark theme:
                    background-color: var(--blue-700);
                    // White in light theme, black in dark theme:
                    color: var(--white);
                }
                &:hover:not([data-selected-option]) {
                    @include imminent-choice;
                }
            }
        }
        > h5 {
            margin: 10px;
        }
    }
}

// Downvote button:
.question .js-vote-down-btn[data-cpuserscript-one-click-vtc-imminent-downvote] {
    @include imminent-choice;
}
