#versions-control-container {

    // The create/publish version buttons are now handled in the toolbar
    // and visible at all times. Hide them in version control to prevent
    // showing the same button twice.
    .versions-function-buttons-container {
        display: none;
    }
}

.versions-load-buttons-container {
    float: right;
    margin: 15px 15px 5px 15px;

    button {
        margin-left: 10px;
    }
}

.versions-scrollview {
    float: left;
    height: 300px;
    width: calc(100% - 30px);
    margin: 0 15px 15px 15px;
}

.versions-container {
    .version {
        float: left;
        position: relative;
        margin: 10px 5px 0 5px;
        width: calc(100% - 10px);
        border-radius: 5px;
        padding: 5px;
        cursor: pointer;

        &:nth-of-type(1) {
            margin-top: 5px;
        }

        &:nth-last-child(1) {
            margin-bottom: 5px;
        }

        &.active,
        &:hover {
            background-color: $document-editor-side-menu-background-color;
        }

        .version-name {
            margin-left: 5px;
            line-height: 26px;
        }

        /* Version state */
        .version-state {
            float: right;
            margin-right: 5px;
            line-height: 26px;
        }

        &[data-version-state='0'] {
            .version-state {
                color: #ffc107;
            }

            .version-options {
                .version-publish-time {
                    background: #ffc107;
                }

                .version-function-button-duplicate,
                .version-function-button-archive {
                    display: none;
                }
            }
        }

        &[data-version-state='1'] {
            .version-state {
                color: #28a745;
            }

            .version-options {
                .version-publish-time {
                    background: #28a745;
                }

                .version-function-button-duplicate,
                .version-function-button-delete {
                    display: none;
                }
            }
        }

        &[data-version-state='2'] {
            .version-state {
                color: #6c757d;
            }

            .version-options {
                .version-publish-time {
                    background: #6c757d;
                }

                .version-function-button-archive,
                .version-function-button-delete {
                    display: none;
                }
            }
        }

        .version-options {
            position: absolute;
            top: 0;
            right: 0;
            opacity: 0;

            .version-publish-time {
                padding: 1px 5px;
                margin-right: 5px;
                font-size: 12px;
                background: red;
                border-radius: 5px;
            }

            button {
                width: 26px;
                height: 26px;
                margin: 5px;

				&.version-function-button {
					svg {
						fill: #ffffff;
						padding: 3px;
					}
				}
            }
        }

        &:hover {
            .version-options {
                opacity: 1;
                transition: 0.5s;
            }

            .version-state {
                opacity: 0;
                transition: 0.5s;
            }
        }
    }
}