// ==========================================================================
// Fields - Rich Text
// ==========================================================================

.fui-rich-text {
    position: relative;
}

.fui-rich-text-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 3px 3px 0 0;
    padding: 4px 8px;
    align-items: center;
    flex-wrap: wrap;
    display: flex;
    z-index: 1;
    border-bottom: 1px rgba(49, 49, 93, 0.15) solid;
    box-shadow: 0 2px 3px 0 rgba(49, 49, 93, 0.075);
}

.fui-rich-text-content {
    padding-top: 50px;
    min-height: 10rem;

    p {
        margin: 0 0 1rem;
    }
}

.fui-rich-text-button {
    background: transparent;
    color: #1c2e36;
    border-radius: 3px;
    padding-left: 4px;
    padding-right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-align: center;
    height: 32px;
    width: 32px;
    margin: 0 2px;
    cursor: pointer;

    &.fui-rich-text-selected,
    &:hover {
        background-color: #edf3fa;
    }
}

// Enforce some styles
.fui-rich-text-content {
    ol, ul {
        list-style-type: revert;
        margin: revert;
        padding: revert;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: revert;
        font-weight: revert;
    }

    blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, pre {
        margin: revert;
    }

    a {
        color: revert;
        text-decoration: revert;
    }

    hr {
        height: revert;
        overflow: revert;
        border-style: inset;
        border-width: 1px;
    }
}

// Add some opinionated styles
.fui-rich-text-content {
    blockquote {
        padding: 0 1em;
        color: #6a737d;
        border-left: 0.25em solid #dfe2e5;
        margin: 0 0 1rem;
    }

    pre {
        background: #f4f5f7;
        padding: 1rem;
        border-radius: 4px;
    }
}

// Add placeholder
.fui-rich-text-content[data-placeholder]:empty::before {
    content: attr(data-placeholder);
}

