/*
 * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";

.ck.ck-find-and-replace-form {
	width: 400px;

	/*
	 * The <form> needs tabindex="-1" for proper Esc handling after being clicked
	 * but the side effect is that this creates a nasty focus outline in some browsers.
	 */
	&:focus {
		outline: none;
	}

	& fieldset {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		align-content: stretch;

		padding: var(--ck-spacing-large);
		border: 0;
		margin: 0;

		& > .ck-button {
			flex: 0 0 auto;
		}

		@mixin ck-dir ltr {
			& > * + * {
				margin-left: var(--ck-spacing-standard);
			}
		}

		@mixin ck-dir rtl {
			& > * + * {
				margin-right: var(--ck-spacing-standard);
			}
		}

		& .ck-labeled-field-view {
			flex: 1 1 auto;

			& .ck-input {
				width: 100%;
				min-width: 50px;
			}
		}

		/* The find fieldset */
		&.ck-find-and-replace-form__find {
			/* To display all controls in line when there's an error under the input */
			align-items: flex-start;

			& > .ck-button-find {
				font-weight: bold;

				/* Beef the find button up a little. It's the main action button in the form */
				& .ck-button__label {
					padding-left: var(--ck-spacing-large);
					padding-right: var(--ck-spacing-large);
				}
			}

			& > .ck-button-prev > .ck-icon {
				transform: rotate(90deg);
			}

			& > .ck-button-next > .ck-icon {
				transform: rotate(-90deg);
			}

			& .ck-results-counter {
				top: 50%;
				transform: translateY(-50%);

				@mixin ck-dir ltr {
					right: var(--ck-spacing-standard);
				}

				@mixin ck-dir rtl {
					left: var(--ck-spacing-standard);
				}

				color: var(--ck-color-base-border);
			}
		}

		/* The replace fieldset */
		&.ck-find-and-replace-form__replace {
			flex-wrap: wrap;
			justify-content: flex-end;
			margin-top: calc( -1 * var(--ck-spacing-large) );

			& > .ck-labeled-field-view {
				margin-bottom: var(--ck-spacing-large);
			}

			& > .ck-options-dropdown {
				margin-right: auto;
				margin-left: 0;
			}

			& > .ck-labeled-field-view,
			& > .ck-labeled-field-view .ck-input {
				width: 100%;
			}
		}
	}
}

@mixin ck-media-phone {
	.ck.ck-find-and-replace-form {
		width: 300px;

		& fieldset {
			flex-wrap: wrap;

			/* The find fieldset */
			&.ck-find-and-replace-form__find {
				& .ck-labeled-field-view {
					flex: 1 0 auto;
					width: 100%;
					margin-bottom: var(--ck-spacing-standard);
				}

				& > .ck-button {
					text-align: center;

					&:first-of-type {
						flex: 1 1 auto;

						@mixin ck-dir ltr {
							margin-left: 0;
						}

						@mixin ck-dir rtl {
							margin-right: 0;
						}

						& .ck-button__label {
							width: 100%;
							text-align: center;
						}
					}
				}
			}

			/* The replace fieldset */
			&.ck-find-and-replace-form__replace > :not(.ck-labeled-field-view) {
				flex: 1 1 auto;

				&.ck-dropdown {
					flex-grow: 0;
				}

				&.ck-button > .ck-button__label {
					width: 100%;
					text-align: center;
				}
			}
		}
	}
}