@prefix: graphjs;

@{prefix}-feed-composer.@{prefix}-root {
    display: block;
    // ThemeOption: color: @text-color-normal;
    &.@{prefix}-box {
        .@{prefix}-content {
            padding: 1.5em;
            padding-bottom: 4em;
            .@{prefix}-options {
                border-top: 1px solid fade(black, 10%);
                // ThemeOption: background-color: tint(@background-color-contrast, 5%);
            }
        }
    }
    &.@{prefix}-inline {
        .@{prefix}-content {
            padding-bottom: 3.5em;
            .@{prefix}-options {
                & > * {
                    &:first-child {
                        margin-left: 0;
                    }
                }
                button {
                    .border-radius(@border-radius-small);
                }
            }
        }
    }
    .@{prefix}-content {
        overflow: hidden;
        .@{prefix}-entry {
            display: inline-block;
            position: relative;
            width: 100%;
            @{prefix}-input-text {
                // ThemeOption: background-color: @background-color-contrast;
            }
            .@{prefix}-embed {
                textarea{
                    height: 8em;
                    margin : 1em auto;
                }
                button {
                    width: 10em;
                    font-size: 0.8em;
                }
            }
        }
        .@{prefix}-media {
            .flex;
            .justify-content(center);
            .flex-wrap(wrap);
            margin-top: 1.5em;
            .@{prefix}-item {
                overflow: hidden;
                text-align: center;
                .border-radius(@border-radius-small);
                // ThemeOption: background-color: @background-color-contrast;
                &.@{prefix}-photo {
                    margin-right: 1em;
                    margin-bottom: 1em;
                    width: 8em;
                    height: 8em;
                    &:last-child {
                        margin-right: 0;
                    }
                    div {
                        width: 100%;
                        height: 100%;
                        background-position: center top;
                        background-repeat: no-repeat;
                        background-size: cover;
                    }
                }
                &.@{prefix}-video {
                    width: 100%;
                    height: auto;
                    max-width: 24em;
                    max-height: 13.5em;
                    img {
                          width: auto;
                          height: auto;
                          max-width: 100%;
                          max-height: 100%;
                    }
                }
                &.@{prefix}-document {
                    margin-right: 1em;
                    margin-bottom: 1em;
                    width: 12em;
                    height: 3em;
                    &:last-child {
                        margin-right: 0;
                    }
                    div {
                        position: relative;
                        width: 100%;
                        height: 100%;
                        max-width: 100%;
                        max-height: 100%;
                        padding: .5em;
                        padding-left: 3em;
                        .single-line-text;
                        text-align: left;
                        svg {
                            position: absolute;
                            left: .5em;
                            height: 2em;
                            path {
                                // ThemeOption: fill: @primary-color;
                            }
                        }
                        b {
                            font-size: .85em;
                            line-height: 1.25em;
                        }
                        span {
                            font-size: .75em;
                        }
                    }
                }
            }
        }
        .@{prefix}-options {
            display: inline-block;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 2.5em;
            .clearfix;
            & > * {
                display: inline-block;
                width: auto;
            }
            a {
                .flex();
                float: left;
                margin-left: 1em;
                padding: .65em 0;
                // ThemeOption: .text-color-states(@text-color-strong);
                // ThemeOption: .icon-color-states(@text-color-strong);
                .bold-font;
                line-height: 1.2em;
                &.disabled {
                    opacity: .35;
                    pointer-events: none;
                }
                svg {
                    width: 1.2em;
                    height: 1.2em;
                    margin-right: .3em;
                    vertical-align: top;
                }
                span {
                  color: inherit;
                  font-weight: inherit;
                  line-height: 1.1em; // .1em less than the parent
                }
            }
            button {
                float: right;
                min-width: 10em;
                font-size: 1em;
                line-height: 1em;
                .border-radius(0);
                // ThemeOption: .background-color-states(@primary-color);
            }
        }
    }
}