// Atto styles
// -------------------------
.atto_image_preview {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.atto_image_preview_box {
    max-height: 200px;
    margin-bottom: 1em;
    overflow: auto;
}

.editor_atto_content img {
    cursor: pointer;
}

.atto_image_size {
    display: inline-block;
}

.atto_image_size input[type=checkbox] {
    @include margin(null, 1em, null, 1em);
}

.atto_image_size input[type=text] {
    width: 3em;
}

.atto_image_size label {
    display: inline-block;
}

.atto_image_button_text-top,
.atto_image_button_middle,
.atto_image_button_text-bottom,
.atto_image_button_left,
.atto_image_button_right {
    vertical-align: middle;
    max-width: 100%;
    display: inline-block;
    margin: 0 0.5em;

    &.img-responsive {
        /* If the image is display: block then linking the image to URLs won't work. */
        /*display: inline-block;*/
        max-width: 100%;
    }
}

.atto_image_button_text-top {
    vertical-align: text-top;
}

.atto_image_button_middle {
    vertical-align: middle;
}

.atto_image_button_text-bottom {
    vertical-align: text-bottom;
}

.atto_image_button_left {
    @include float(start);
    @include margin(0, 0.5em, 0, 0);
}

.atto_image_button_right {
    @include float(end);
    @include margin(0, 0, 0, 0.5em);
}