@import colors
$upload-header-background-color = $top-navigation-color
$upload-header-background-color-darktheme = $top-navigation-color-darktheme
$upload-border-color = #DDD
$cancel-button-color = tomato

#post-upload
    form
        width: 100%
        max-width: 40em
        margin: 0 auto
        text-align: left

        &.inactive input[type=submit],
        &.inactive .skip-duplicates
        &.uploading input[type=submit],
        &.uploading .skip-duplicates,
        &:not(.uploading) .cancel
            display: none

    .dropper-container
        margin: 0 auto
        .file-dropper
            font-size: 150%
            padding: 2em
            small
                font-size: 60%

    input[type=submit]
        margin-top: 1em

    .cancel
        margin-top: 1em
        background: $cancel-button-color
        border-color: $cancel-button-color
        &:focus
            border: 2px solid $text-color

    .skip-duplicates
        margin-left: 1em

    form>.messages
        margin-top: 1em

    .uploadables-container
        list-style-type: none
        margin: 0
        padding: 0

        .uploadable-container
            clear: both
            margin: 0 0 1.2em 0
            padding-left: 13em

            &>.thumbnail-wrapper
                float: left
                width: 12em
                height: 8em
                margin: 0 0 0 -13em
                .thumbnail
                    width: 100%
                    height: 100%

            .uploadable
                border: 1px solid $upload-border-color
                min-height: 8em
                box-sizing: border-box

                header
                    line-height: 1.5em
                    padding: 0.25em 1em
                    text-align: left
                    background: $upload-header-background-color
                    border-bottom: 1px solid $upload-border-color

                    nav
                        &:first-of-type
                            float: left
                            a
                                margin: 0 0.5em 0 0
                        &:last-of-type
                            float: right
                            a
                                margin: 0 0 0 0.5em

                        ul
                            list-style-type: none
                        ul, li
                            display: inline-block
                            margin: 0
                            padding: 0

                    span.filename
                        padding: 0 0.5em
                        display: block
                        overflow: hidden
                        white-space: nowrap
                        text-overflow: ellipsis

                .body
                    margin: 1em

                    .anonymous
                        margin: 0.3em 0

                    .safety
                        margin: 0.3em 0
                        label
                            display: inline-block
                            margin-right: 1em

                    .options div
                        display: inline-block
                        margin: 0 1em 0 0

                    .messages
                        margin-top: 1em
                        .message:last-child
                            margin-bottom: 0

                    .lookalikes
                        list-style-type: none
                        margin: 0
                        padding: 0

                        li
                            clear: both
                            margin: 1em 0 0 0
                            padding-left: 7em
                            font-size: 90%

                            .thumbnail-wrapper
                                float: left
                                width: 6em
                                height: 4em
                                margin: 0 0 0 -7em
                                .thumbnail
                                    width: 100%
                                    height: 100%

                        .description
                            margin-right: 0.5em
                            display: inline-block
                        .controls
                            float: right
                            display: inline-block


            &:first-child .move-up
                color: $inactive-link-color
            &:last-child .move-down
                color: $inactive-link-color
            .darktheme &:first-child .move-up
                color: $inactive-link-color-darktheme
            .darktheme &:last-child .move-down
                color: $inactive-link-color-darktheme

.darktheme #post-upload .uploadables-container .uploadable-container
    .uploadable header
        background: $upload-header-background-color-darktheme
    &:first-child .move-up
        color: $inactive-link-color-darktheme
    &:last-child .move-down
        color: $inactive-link-color-darktheme