html {
    &:not(.dark) .bard-editor .bard-content span[data-light-color] {
        background-color: rgb(115 128 140 / .5);
    }

    &.dark .bard-editor .bard-content span[data-dark-color] {
        background-color: rgb(255 255 255 / .25);
    }
}

.font-size {
    width: 14rem;
    padding: .5rem .25rem;

    .font-size-presets {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .75rem;
        padding: .5rem .75rem;
        max-height: 13rem;
        overflow: auto;

        button {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 2.5rem;
            height: 2.5rem;
            border: 1px solid #dde3e9;
            border-radius: .25rem;
            cursor: pointer;

            &.font-size-swatch-reset {
                background-image: repeating-linear-gradient(-45deg, #fafcff 0 8px, #eef2f6 8px 10px);
            }

            html.dark & {
                border-color: #171717;

                &.font-size-swatch-reset {
                    background-image: repeating-linear-gradient(-45deg, #3b3f41 0 8px, #242628 8px 10px);
                }
            }

            svg {
                width: 50%;
                height: 50%;
                background: rgb(0 0 0 / .1);
                border-radius: 100%;
                padding: .2rem;
            }
        }
    }

    .font-size-form {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: .5rem .75rem;

        .input-text {
            display: flex;
            height: 2.5rem;
            padding: 0;
            margin: 0;
            box-shadow: none !important;

            .font-size-input {
                position: relative;
                width: 100%;
                height: 100%;

                input[type="text"] {
                    cursor: pointer;
                    width: 100%;
                    height: 100%;
                    padding: 0 2px;
                    margin: 0;
                    background: transparent;
                    position: relative;
                    transition: box-shadow .15s ease-in-out;

                    &:focus, &:focus-within {
                        box-shadow: inset 0 0 0 2px var(--tw-ring-color);
                        border-radius: 2px;
                    }

                    @supports (-moz-appearance: none) {
                        padding: 3px;
                    }
                }

                .font-size-placeholder {
                    position: absolute;
                    inset: 2px;
                    background-image: repeating-linear-gradient(-45deg, #fafcff 0 12px, #eef2f6 12px 15px);
                    pointer-events: none;
                    border: 1px solid #d1d5db;

                    html.dark & {
                        background-image: repeating-linear-gradient(-45deg, #3b3f41 0 12px, #242628 12px 15px);
                        border-color: #171717;
                    }
                }
            }

            button.font-size-reset {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 1.75rem;
                padding-inline-end: .25rem;
                margin: 0;
                flex-shrink: 0;
                cursor: pointer;
                font-size: 21px;
                opacity: .85;

                html:not(.dark) & {
                    color: #73808c;
                }

                &:hover {
                    opacity: 1;
                }

                &[disabled] {
                    opacity: .3;
                    cursor: default;
                }
            }
        }

        .btn-primary {
            min-width: 3rem;
            height: 2.5rem;
            padding: 0 .5rem;
            margin: 0;
        }
    }
}