@import 'variables';
@import 'prosemirror/prosemirror';

:host {
    display: block;
    max-width: 710px;
    margin-bottom: 0.5rem;

    &.readonly {
        ::ng-deep .ProseMirror-menubar {
            display: none;
        }
    }
}

::ng-deep .ProseMirror-menubar {
    position: sticky;
    top: 24px;
    margin-top: 6px;
    border: 1px solid $color-grey-300;
    border-bottom: none;
    background-color: $color-grey-200;
    padding: 6px 12px;
}

::ng-deep .vdr-prosemirror {
    background-color: white;
    min-height: 128px;
    border: 1px solid $color-grey-300;
    border-radius: 0 0 3px 3px;
    transition: border-color 0.2s;
    overflow: auto;

    &:focus {
        border-color: $color-primary-500 !important;
        box-shadow: 0 0 1px 1px $color-primary-100;
    }

    /* Add space around the hr to make clicking it easier */

    hr {
        padding: 2px 10px;
        border: none;
        margin: 1em 0;
    }

    hr:after {
        content: '';
        display: block;
        height: 1px;
        background-color: silver;
        line-height: 2px;
    }

    img {
        cursor: default;
        max-width: 100%;
    }
}
