@prefix: graphjs;

@{prefix}-feedback.@{prefix}-root {
    display: block;
    // ThemeOption: color: @text-color-normal;
    &.@{prefix}-inline {
        .@{prefix}-header {
            border-color: transparent;
        }
    }
    .@{prefix}-content {
        .@{prefix}-feedback {
            display: inline-block;
            width: 100%;
            textarea {
                width: 100%;
                height: 7.5em;
                &.@{prefix}-closed {
                    height: 0;
                    border: none;
                }
            }
            button {
                float: right;
                width: auto;
                margin-top: .5em;
                margin-left: .5em;
                font-size: .9em;
            }
            & + .@{prefix}-synopsis {
                margin-top: 2.5em;
            }
        }
        .@{prefix}-synopsis {
            display: inline-block;
            width: 100%;
            margin-bottom: 1.25em;
            button {
                float: right;
                width: auto;
                font-size: .75em;
            }
        }
        .@{prefix}-item {
            margin-bottom: 1.25em;
            .clearfix;
            &:last-child {
                margin-bottom: 0;
            }
            .@{prefix}-author {
                float: left;
                width: 3em;
                height: 3em;
                .border-radius(@border-radius-full);
                cursor: pointer;
                & + .@{prefix}-memo {
                    width: calc(100% - 4em);
                    margin-left: 1em;
                }
            }
            .@{prefix}-memo {
                float: left;
                display: block;
                position: relative;
                width: 100%;
                padding: 1em;
                .border-radius(@border-radius-large);
                border-width: 1px;
                border-style: solid;
                // ThemeOption: border-color: fade(@default-color, 3%);
                border-color: transparent; // ThemeFix
                // ThemeOption: background-color: @background-color-contrast;
                .box-shadow(e("0 0 15px 0 fade(black, 5%), 0 2px 1px 0px fade(black, 7.5%)"));
                &::before {
                    content: "\0025C0";
                    position: absolute;
                    top: 1em;
                    left: calc(-1em * 2 /3);
                    // ThemeOption: color: @background-color-contrast;
                    font-size: 1em;
                    text-shadow: -1px 0px 2px fade(black, 15%);
                }
                span {
                    display: block;
                    width: 100%;
                    height: 1em;
                    margin: 0;
                    margin-bottom: 1em;
                    padding: 0;
                    svg {
                        width: auto;
                        height: inherit;
                        vertical-align: top;
                    }
                }
                fieldset {
                    margin-bottom: 1em;
                }
                textarea {
                    height: auto;
                    margin: 0;
                    padding: 0;
                    border: none;
                    background-color: transparent;
                }
                a {
                    margin-right: 1em;
                    // ThemeOption: .text-color-states(@text-color-normal);
                    .bold-font;
                    font-size: .9em;
                    text-transform: uppercase;
                    &:last-of-type {
                        margin-right: 0;
                    }
                    &.graphjs-danger {
                        .text-color-states(@danger-color);
                    }
                }
                p {
                    margin: 0;
                    // ThemeOption: color: @text-color-normal;
                    font-size: 1em;
                    line-height: 150%;
                }
                b {
                    display: inline-block;
                    margin-top: .5em;
                    &::before {
                        content: "\2014";
                    }
                }
            }
        }
    }
}