/*
 * 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
 */

:root {
    --ck-image-style-spacing: 1.5em;
    --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
}

.ck-content {
/* Provides a minimal side margin for the left and right aligned images, so that the user has a visual feedback
confirming successful application of the style if image width exceeds the editor's size.
See https://github.com/ckeditor/ckeditor5/issues/9342 */
& .image-style-block-align-left,
& .image-style-block-align-right {
      max-width: calc(100% - var(--ck-image-style-spacing));
  }

/* Allows displaying multiple floating images in the same line.
See https://github.com/ckeditor/ckeditor5/issues/9183#issuecomment-804988132 */
& .image-style-align-left,
& .image-style-align-right {
      clear: none;
  }

& .image-style-side {
      float: right;
      margin-left: var(--ck-image-style-spacing);
      max-width: 50%;
  }

& .image-style-align-left {
      float: left;
      margin-right: var(--ck-image-style-spacing);
  }

& .image-style-align-center {
      margin-left: auto;
      margin-right: auto;
  }

& .image-style-align-right {
      float: right;
      margin-left: var(--ck-image-style-spacing);
  }

& .image-style-block-align-right {
      margin-right: 0;
      margin-left: auto;
  }

& .image-style-block-align-left {
      margin-left: 0;
      margin-right: auto;
  }

/* Simulates margin collapsing with the preceding paragraph, which does not work for the floating elements. */
& p + .image-style-align-left,
& p + .image-style-align-right,
& p + .image-style-side {
      margin-top: 0;
  }

& .image-inline {
&.image-style-align-left,
&.image-style-align-right {
     margin-top: var(--ck-inline-image-style-spacing);
     margin-bottom: var(--ck-inline-image-style-spacing);
 }

&.image-style-align-left {
     margin-right: var(--ck-inline-image-style-spacing);
 }

&.image-style-align-right {
     margin-left: var(--ck-inline-image-style-spacing);
 }
}
}

.ck.ck-splitbutton {
/* The button should display as a regular drop-down if the action button
is forced to fire the same action as the arrow button. */
&.ck-splitbutton_flatten {
&:hover,
&.ck-splitbutton_open {
& > .ck-splitbutton__action:not(.ck-disabled),
& > .ck-splitbutton__arrow:not(.ck-disabled),
& > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover) {
      background-color: var(--ck-color-button-on-background);

&::after {
     display: none;
 }
}
}

&.ck-splitbutton_open:hover {
& > .ck-splitbutton__action:not(.ck-disabled),
& > .ck-splitbutton__arrow:not(.ck-disabled),
& > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover) {
      background-color: var(--ck-color-button-on-hover-background);
  }
}
}
}