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-color-split-button-hover-background: hsl(0, 0%, 92%);
    --ck-color-split-button-hover-border: hsl(0, 0%, 70%);
}

.ck.ck-splitbutton {
    /*
     * Note: ck-rounded and ck-dir mixins don't go together (because they both use @nest).
     */
    & > .ck-splitbutton__action {
        @nest [dir="ltr"] & {
            /* Don't round the action button on the right side */
            border-top-right-radius: unset;
            border-bottom-right-radius: unset;
        }

        @nest [dir="rtl"] & {
            /* Don't round the action button on the left side */
            border-top-left-radius: unset;
            border-bottom-left-radius: unset;
        }
    }

    & > .ck-splitbutton__arrow {
        /* It's a text-less button and since the icon is positioned absolutely in such situation,
        it must get some arbitrary min-width. */
        min-width: unset;

        @nest [dir="ltr"] & {
            /* Don't round the arrow button on the left side */
            @mixin ck-rounded-corners {
                border-top-left-radius: unset;
                border-bottom-left-radius: unset;
            }
        }

        @nest [dir="rtl"] & {
            /* Don't round the arrow button on the right side */
            border-top-right-radius: unset;
            border-bottom-right-radius: unset;
        }

        & svg {
            width: var(--ck-dropdown-arrow-size);
        }
    }

    /* When the split button is "open" (the arrow is on) or being hovered, it should get some styling
    as a whole. The background of both buttons should stand out and there should be a visual
    separation between both buttons. */
    &.ck-splitbutton_open,
    &:hover {
        /* When the split button hovered as a whole, not as individual buttons. */
        & > .ck-button:not(.ck-on):not(.ck-disabled):not(:hover) {
            background: var(--ck-color-split-button-hover-background);
        }

        @nest [dir="ltr"] & {
            & > .ck-splitbutton__arrow:not(.ck-disabled) {
                border-left-color: var(--ck-color-split-button-hover-border);
            }
        }

        @nest [dir="rtl"] & {
            & > .ck-splitbutton__arrow:not(.ck-disabled) {
                border-right-color: var(--ck-color-split-button-hover-border);
            }
        }
    }

    /* Don't round the bottom left and right corners of the buttons when "open"
    https://github.com/ckeditor/ckeditor5/issues/816 */
    &.ck-splitbutton_open {
        @mixin ck-rounded-corners {
            & > .ck-splitbutton__action {
                border-bottom-left-radius: 0;
            }

            & > .ck-splitbutton__arrow {
                border-bottom-right-radius: 0;
            }
        }
    }
}