// comments.scss
// Styling for COMMENTS - editor widget
// ----------------------------------------------------------------------------------------
@import '~mixins.scss';
@import '~variables.scss';

.sd-widget.metadata {
    .widget-content {
        background: $sd-background;
    }
    .ednote {
        @include clearfix();
        height: auto !important;
        .data {
            clear: both;
            float: none !important;
            height: auto !important;
            width: 100% !important;
        }
    }
}


.basic-list {
    margin-bottom: 20px;
    &--dotted {
        .basic-list__item {
            border-bottom: 1px dotted rgba(123, 123, 123, 0.5);
        }
    }
    &--no-margin {
        margin-bottom: 0;
    }
    .basic-list__item {
        padding: 1rem 0 0.8rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        &--stacked {
            flex-direction: column;
            align-items: stretch;
            .basic-list__item-label {
                padding-bottom: 0.5rem;
            }
            .basic-list__item-data {
                text-align: left;
                .basic-input {
                    max-width: auto;
                    text-align: left;
                }
            }
        }
    }
    .basic-list__item-label {
        flex-grow: 0;
        font-size: 11px;
        text-transform: uppercase;
        padding-right: 1rem;
        margin: 0;
        color: rgba(0, 0, 0, 0.5);
        min-width: 6rem;
        @include text-semibold();
    }
    .basic-list__item-data {
        flex-grow: 1;
        margin-bottom: 2px;
        text-align: right;
        .basic-input {
            max-width: 160px;
            text-align: right;
        }
    }
    .state-label {
        margin-right: 0;
        + .state-label {
            margin-left: 0.5rem;
        }
    }
}