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

/* Note: To avoid rendering issues (aliasing) but to preserve the responsive nature
of the component, floating–point numbers have been used which, for the default font size
(see: --ck-font-size-base), will generate simple integers. */
:root {
    /* 34px at 13px font-size */
    --ck-switch-button-toggle-width: 2.6153846154em;
    /* 14px at 13px font-size */
    --ck-switch-button-toggle-inner-size: 1.0769230769em;
    --ck-switch-button-toggle-spacing: 1px;
    --ck-switch-button-translation: calc(
        var(--ck-switch-button-toggle-width) -
        var(--ck-switch-button-toggle-inner-size) -
        2 * var(--ck-switch-button-toggle-spacing)
    );
}

.ck.ck-button.ck-switchbutton {
    & .ck-button__label {
        @mixin ck-dir ltr {
            /* Separate the label from the switch */
            margin-right: calc(2 * var(--ck-spacing-large));
        }

        @mixin ck-dir rtl {
            /* Separate the label from the switch */
            margin-left: calc(2 * var(--ck-spacing-large));
        }
    }

    & .ck-button__toggle {
        @mixin ck-rounded-corners;

        @mixin ck-dir ltr {
            /* Make sure the toggle is always to the right as far as possible. */
            margin-left: auto;
        }

        @mixin ck-dir rtl {
            /* Make sure the toggle is always to the left as far as possible. */
            margin-right: auto;
        }

        /* Gently animate the background color of the toggle switch */
        transition: background 400ms ease;

        width: var(--ck-switch-button-toggle-width);
        background: var(--ck-color-switch-button-off-background);

        & .ck-button__toggle__inner {
            @mixin ck-rounded-corners {
                border-radius: calc(.5 * var(--ck-border-radius));
            }

            /* Leave some tiny bit of space around the inner part of the switch */
            margin: var(--ck-switch-button-toggle-spacing);
            width: var(--ck-switch-button-toggle-inner-size);
            height: var(--ck-switch-button-toggle-inner-size);
            background: var(--ck-color-switch-button-inner-background);

            /* Gently animate the inner part of the toggle switch */
            transition: all 300ms ease;
        }

        &:hover {
            background: var(--ck-color-switch-button-off-hover-background);

            & .ck-button__toggle__inner {
                box-shadow: 0 0 0 5px var(--ck-color-switch-button-inner-shadow);
            }
        }
    }

    &.ck-disabled .ck-button__toggle {
        @mixin ck-disabled;
    }

    &.ck-on .ck-button__toggle {
        background: var(--ck-color-switch-button-on-background);

        &:hover {
            background: var(--ck-color-switch-button-on-hover-background);
        }

        & .ck-button__toggle__inner {
            /*
             * Move the toggle switch to the right. It will be animated.
             */
            @mixin ck-dir ltr {
                transform: translateX( var( --ck-switch-button-translation ) );
            }

            @mixin ck-dir rtl {
                transform: translateX( calc( -1 * var( --ck-switch-button-translation ) ) );
            }
        }
    }
}