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/_focus.css";
@import "../../../mixins/_shadow.css";

:root {
    --ck-input-text-width: 18em;
}

.ck.ck-input-text {
    @mixin ck-rounded-corners;
    @mixin ck-box-shadow var(--ck-inner-shadow);

    background: var(--ck-color-input-background);
    border: 1px solid var(--ck-color-input-border);
    padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium);
    min-width: var(--ck-input-text-width);

    /* This is important to stay of the same height as surrounding buttons */
    min-height: var(--ck-ui-component-min-height);

    /* Apply some smooth transition to the box-shadow and border. */
    transition: box-shadow .2s ease-in-out, border .2s ease-in-out;

    &:focus {
        @mixin ck-focus-ring;
        @mixin ck-box-shadow var(--ck-focus-outer-shadow), var(--ck-inner-shadow);
    }

    &[readonly] {
        border: 1px solid var(--ck-color-input-disabled-border);
        background: var(--ck-color-input-disabled-background);
        color: var(--ck-color-input-disabled-text);

        &:focus {
            /* The read-only input should have a slightly less visible shadow when focused. */
            @mixin ck-box-shadow var(--ck-focus-disabled-outer-shadow), var(--ck-inner-shadow);
        }
    }

    &.ck-error {
        border-color: var(--ck-color-input-error-border);
        animation: ck-text-input-shake .3s ease both;

        &:focus {
            @mixin ck-box-shadow var(--ck-focus-error-outer-shadow), var(--ck-inner-shadow);
        }
    }
}

@keyframes ck-text-input-shake {
    20% {
        transform: translateX(-2px);
    }

    40% {
        transform: translateX(2px);
    }

    60% {
        transform: translateX(-1px);
    }

    80% {
        transform: translateX(1px);
    }
}