@import "../../../../../modules/backend/assets/less/core/boot.less";

@multilingual-btn-color: #555555;

.field-multilingual {
    position: relative;

    .ml-btn {
        background: transparent;
        position: absolute;
        color: lighten(@multilingual-btn-color, 15%);
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 1px;
        width: 44px;
        padding-right: 0;
        .box-shadow(none);
        text-shadow: none;
        z-index: 2;

        &:hover {
            color: @multilingual-btn-color;
        }
    }

    &.field-multilingual-text {
        .form-control {
            padding-right: 44px;
        }
        .ml-btn {
            right: 4px;
            top: 50%;
            margin-top: -44px;
            height: 88px;
        }
    }

    &.field-multilingual-textarea {
        textarea {
            // increase padding on the right so that the textarea content does not overlap with the language button
            padding-right: 30px;
        }

        .ml-btn {
            right: 25px;
            top: 5px;
            width: 24px;
            text-align: right;
            padding-left: 4px;
        }

        .ml-dropdown-menu {
            top: 39px;
            right: 1px;
        }
    }

    &.field-multilingual-richeditor {
        .ml-btn {
            top: 43px;
            right: 25px;
            text-align: right;
        }

        .ml-dropdown-menu {
            top: 74px;
            right: 12px;
        }
    }

    &.field-multilingual-markdowneditor {
        .ml-btn {
            top: 43px;
            right: 25px;
            text-align: right;
        }

        .ml-dropdown-menu {
            top: 74px !important;
            right: 12px;
        }
    }

    &.field-multilingual-repeater {
        .ml-btn {
            top: -27px;
            right: 11px;
            text-align: right;
        }

        .ml-dropdown-menu {
            top: 0;
            right: 0;
        }

        &.is-empty {
            padding-top: 5px;

            .ml-btn {
                top: -10px;
                right: 5px;
                text-align: right;
            }

            .ml-dropdown-menu {
                top: 15px;
                right: -7px;
            }
        }
    }

    &.field-multilingual-nestedform {
        .ml-btn {
            top: -3px;
            right: 11px;
            text-align: right;
        }

        .ml-dropdown-menu {
            top: 24px;
            right: -2px;
        }

        &.is-paneled {
            .ml-btn {
                top: 7px;
                right: 15px;
            }

            .ml-dropdown-menu {
                top: 34px;
                right: 2px;
            }
        }
    }
}

.fancy-layout {
    .field-multilingual-text input.form-control {
        padding-right: 44px;
    }
}

.help-block.before-field + .field-multilingual.field-multilingual-textarea {
    .ml-btn {
        top: -41px;
    }
}
