ckeditor/ckeditor5-theme-lark

/*
 * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

@import "../mixins/_rounded.css";

:root {
    --ck-character-grid-tile-size: 24px;
}

.ck.ck-character-grid {
    overflow-y: auto;
    overflow-x: hidden;
    width: 350px;
    max-height: 200px;

    & .ck-character-grid__tiles {
        margin: var(--ck-spacing-standard) var(--ck-spacing-large);
        grid-gap: var(--ck-spacing-standard);
    }

    & .ck-character-grid__tile {
        width: var(--ck-character-grid-tile-size);
        height: var(--ck-character-grid-tile-size);
        min-width: var(--ck-character-grid-tile-size);
        min-height: var(--ck-character-grid-tile-size);
        font-size: 1.2em;
        padding: 0;
        transition: .2s ease box-shadow;
        border: 0;

        &:focus:not( .ck-disabled ),
        &:hover:not( .ck-disabled ) {
            /* Disable the default .ck-button's border ring. */
            border: 0;
            box-shadow: inset 0 0 0 1px var(--ck-color-base-background), 0 0 0 2px var(--ck-color-focus-border);
        }

        /* Make sure the glyph is rendered in the center of the button */
        & .ck-button__label {
            line-height: var(--ck-character-grid-tile-size);
            width: 100%;
            text-align: center;
        }
    }
}