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";
@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";

.ck.ck-toolbar {
    @mixin ck-rounded-corners;

    background: var(--ck-color-toolbar-background);
    padding: 0 var(--ck-spacing-small);
    border: 1px solid var(--ck-color-toolbar-border);

    & .ck.ck-toolbar__separator {
        align-self: stretch;
        width: 1px;
        min-width: 1px;
        margin-top: 0;
        margin-bottom: 0;
        background: var(--ck-color-toolbar-border);
    }

    & > .ck-toolbar__items {
        & > * {
            /* Make sure items wrapped to the next line have v-spacing */
            margin-top: var(--ck-spacing-small);
            margin-bottom: var(--ck-spacing-small);

            /* (#11) Separate toolbar items. */
            margin-right: var(--ck-spacing-small);
        }

        /* Don't display a separator after an empty items container, for instance,
        when all items were grouped */
        &:empty + .ck.ck-toolbar__separator {
            display: none;
        }
    }

    & > .ck-toolbar__items > *,
    & > .ck.ck-toolbar__grouped-dropdown {
        /* Make sure items wrapped to the next line have v-spacing */
        margin-top: var(--ck-spacing-small);
        margin-bottom: var(--ck-spacing-small);
    }

    &.ck-toolbar_vertical {
        /* Items in a vertical toolbar span the entire width. */
        padding: 0;

        /* Specificity matters here. See https://github.com/ckeditor/ckeditor5-theme-lark/issues/168. */
        & > .ck-toolbar__items > .ck {
            /* Items in a vertical toolbar should span the horizontal space. */
            width: 100%;

            /* Items in a vertical toolbar should have no margin. */
            margin: 0;

            /* Items in a vertical toolbar span the entire width so rounded corners are pointless. */
            border-radius: 0;

            /* Items in a vertical toolbar span the entire width so any border is pointless. */
            border: 0;
        }
    }

    &.ck-toolbar_compact {
        /* No spacing around items. */
        padding: 0;

        & > .ck-toolbar__items > * {
            /* Compact toolbar items have no spacing between them. */
            margin: 0;

            /* "Middle" children should have no rounded corners. */
            &:not(:first-child):not(:last-child) {
                border-radius: 0;
            }
        }
    }

    & > .ck.ck-toolbar__grouped-dropdown {
        /*
         * Dropdown button has asymmetric padding to fit the arrow.
         * This button has no arrow so let's revert that padding back to normal.
         */
        & > .ck.ck-button.ck-dropdown__button {
            padding-left: var(--ck-spacing-tiny);
        }
    }

    @nest .ck-toolbar-container & {
        border: 0;
    }
}

/* stylelint-disable */

/*
 * Styles for RTL toolbars.
 *
 * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir"
 * because its parent is not controlled by the editor framework.
 */
[dir="rtl"] .ck.ck-toolbar,
.ck.ck-toolbar[dir="rtl"] {
    & > .ck-toolbar__items > .ck {
        margin-right: 0;
    }

    &:not(.ck-toolbar_compact) > .ck-toolbar__items > .ck {
        /* (#11) Separate toolbar items. */
        margin-left: var(--ck-spacing-small);
    }

    & > .ck-toolbar__items > .ck:last-child {
        margin-left: 0;
    }

    &.ck-toolbar_compact > .ck-toolbar__items > .ck {
        /* No rounded corners on the right side of the first child. */
        &:first-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        /* No rounded corners on the left side of the last child. */
        &:last-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
    }

    /* Separate the the separator form the grouping dropdown when some items are grouped. */
    & > .ck.ck-toolbar__separator {
        margin-left: var(--ck-spacing-small);
    }

    /* Some spacing between the items and the separator before the grouped items dropdown. */
    &.ck-toolbar_grouping > .ck-toolbar__items:not(:empty):not(:only-child) {
        margin-left: var(--ck-spacing-small);
    }
}

/*
 * Styles for LTR toolbars.
 *
 * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir"
 * because its parent is not controlled by the editor framework.
 */
[dir="ltr"] .ck.ck-toolbar,
.ck.ck-toolbar[dir="ltr"] {
    & > .ck-toolbar__items > .ck:last-child {
        margin-right: 0;
    }

    &.ck-toolbar_compact > .ck-toolbar__items > .ck {
        /* No rounded corners on the right side of the first child. */
        &:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        /* No rounded corners on the left side of the last child. */
        &:last-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }

    /* Separate the the separator form the grouping dropdown when some items are grouped. */
    & > .ck.ck-toolbar__separator {
        margin-right: var(--ck-spacing-small);
    }

    /* Some spacing between the items and the separator before the grouped items dropdown. */
    &.ck-toolbar_grouping > .ck-toolbar__items:not(:empty):not(:only-child) {
        margin-right: var(--ck-spacing-small);
    }
}

/* stylelint-enable */