.ql-editor {
    padding: 0;
    overflow-wrap: anywhere;
    overflow-y: visible;
}

.ql-container {
    font-family: inherit;
    font-size: 1em;
    line-height: 1.5em;
    height: auto;
    flex-grow: 1;
}


.ql-container.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.ql-editor.ql-blank::before {
    left: 0px;
    right: 0px;
    font-style: normal;
    color: rgba(0, 0, 0, .3);
}

.ql-bubble .ql-tooltip {
    padding: 0px;
    border-radius: 4px;
}
.ql-bubble .ql-tooltip .ql-toolbar {
}

.ql-bubble .ql-toolbar .ql-formats {
    margin-right: 5px;
}

.ql-bubble .ql-toolbar .ql-formats:first-child {
    margin-left: 5px;
}

.ql-bubble .ql-toolbar .ql-formats:last-child {
    margin-right: 5px;
}

.ql-bubble .ql-tooltip-editor input[type=text]:focus {
    /* Disable tailwind focus ring */
    box-shadow: none;
}


/* Tailwind md breakpoint */
@media (max-width: 767px) {
    .ql-bubble .ql-tooltip {
        position: fixed !important;
        width: auto !important;
        top: 0px !important;
        left: 0px !important;
        right: 0px !important;
        z-index: 60;
        transform: none !important;
    }

    .ql-bubble .ql-tooltip-arrow {
        display: none !important;
    }

    .ql-bubble .ql-tooltip.ql-hidden {
        display: none;
    }
}


.ql-custom-theme.ql-container {
    border: none;
}

.ql-custom-theme.ql-toolbar {
    border: none;
    width: 100%;
    max-width: 390px;
    display: flex;
    margin: 0 auto;
    white-space: nowrap;
    border-radius: 1000px;
    margin-top: 0.75rem;

    position: sticky;
    bottom: .5rem;
}

.ql-custom-theme.ql-toolbar button {
    flex-grow: 1;
    text-align: center;
}

.ql-custom-theme.ql-toolbar button svg {
    margin: 0 auto;
    float: none;
}

.ql-custom-theme .ql-editor {
    min-height: 20vh !important;
}

.ql-custom-theme .ql-tooltip {
    border-radius: 1000px;
    z-index: 100;
}

.ql-custom-theme .ql-tooltip:before {
    content: '';
}

.ql-custom-theme .ql-tooltip.ql-editing:before {
    content: '';
}

.ql-custom-theme .ql-tooltip.ql-editing input {
    border: none;
    outline: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
    font-size: 100%;
}

.ql-custom-theme .ql-tooltip .ql-action,
.ql-custom-theme .ql-tooltip .ql-remove {
    border: none;
}

.ql-custom-theme .ql-tooltip .ql-preview {
  white-space: nowrap !important;
}

/* Make toolbar come before editor on mobile */

@media (max-width: 767px) {  /* Tailwind md breakpoint */
    .rich-text-container.ql-custom-theme {
        display: flex;
        flex-direction: column;
        position: relative;
    }
    .rich-text-container.ql-custom-theme .ql-toolbar {
        order: 1;
        bottom: auto;
        top: 0;
        margin-bottom: 0.75rem;
    }
    .rich-text-container.ql-custom-theme .ql-container {
        order: 2;
    }
}

.ql-clipboard {
    display: none !important;
}

/* Adjust placeholder position in a padded container */
.ql-container.p-2 .ql-editor.ql-blank::before {
    left: 0.5rem;
}

.ql-custom-theme li {
    padding-left: 0em;
}

.ql-custom-theme li.ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 1.25em;
}

.ql-custom-theme li.ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 2.5em;
}

.ql-custom-theme li.ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 3.75em;
}

.ql-custom-theme li.ql-indent-4:not(.ql-direction-rtl) {
    padding-left: 5em;
}

.ql-custom-theme li.ql-indent-5:not(.ql-direction-rtl) {
    padding-left: 6.25em;
}

.ql-custom-theme li.ql-indent-6:not(.ql-direction-rtl) {
    padding-left: 7.5em;
}

.ql-custom-theme li.ql-indent-7:not(.ql-direction-rtl) {
    padding-left: 8.75em;
}

.ql-custom-theme li.ql-indent-8:not(.ql-direction-rtl) {
    padding-left: 10em;
}