@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 var(--color-component-border-200);
    border-bottom: none;
    background-color: var(--color-component-bg-200);
    color: var(--color-icon-button);
    border-radius: var(--border-radius-input) var(--border-radius-input) 0 0;
    padding: 6px 12px;
    display: flex;
    flex-wrap: wrap;
}

::ng-deep .vdr-prosemirror {
    background: var(--color-form-input-bg);
    min-height: 128px;
    min-width: 200px;
    border: 1px solid var(--color-component-border-200);
    border-radius: 0 0 var(--border-radius-input) var(--border-radius-input);
    transition: border-color 0.2s;
    overflow: auto;
    text-align: initial;

    &:focus {
        border-color: var(--color-primary-500) !important;
        box-shadow: 0 0 1px 1px var(--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%;
    }
}
