.inline-editor {
    position: relative;
    transform: translateY(0);
    transition: transform 200ms ease-out, opacity 300ms ease-out;
    opacity: 1;

    &.hidden {
        opacity: 0;
    }

    &.active {
        z-index: 999999;
    }

    &[mode="edit"] {
        .button-wrapper {
            display: flex;
        }
    }

    .button-wrapper {
        display: none;
        position: absolute;
        z-index: 2;
        right: -5px;
        height: 100%;
        align-items: center;

        button {
            border-radius: 50%;
            border: 1px solid @turquoise;
            background: none;
            background-color: rgba(229, 235, 242, 0.6);
            color: @turquoise;
            width: 35px;
            height: 35px;
            padding: 0;
            img {
                vertical-align: middle;
                margin-top: -3px;
                margin-left: 2px;
            }
        }
    }

    .editing {
        .control-panel {
            display: flex;
        }

        .block-wrapper {
            background-color: @white;
            position: relative;

            img {
                display: block;
            }
        }

        .button-wrapper {
            display: none;
        }
    }

    .control-panel {
        display: none;

        .btn {
            text-align: center;
            background: @turquoise;
            border-right: 1px solid #6689C0;
            border-bottom: 1px solid #6689C0;
            color: @white;
            padding: 12px 16px 12px;
            img {
                width: 57%;
            }
            &:nth-child(1){
                img {
                    width: 52%;
                }
            }
            &:nth-child(3){
                img {
                    width: 72%;
                }
            }
            &:nth-child(5){
                img {
                    width: 58%;
                }
            }
            &:active {
                background: @turquoise;
            }

            &:first-child {
                border-bottom-left-radius: 4px;
            }

            &:last-child {
                border-bottom-right-radius: 4px;
            }

            &:last-child {
                border-right: 0;
            }
        }
    }

}