/* Defining the default content styles for the block images.
This is what the newly inserted image without any
style-specific class will look like. */
.ck-content .image {
   margin-top: 50px;
   margin-bottom: 50px;
}
.ck-content .image img {
   border-radius: 50%;
   width: 180px;
   height: 180px;
   object-fit: cover;
   filter: grayscale(100%) brightness(70%);
   box-shadow: 10px 10px 30px #00000078;
}
.ck-content .image::before {
   content: '';
   width: 100%;
   height: 100%;
   background-color: #1138b0;
   top: 5%;
   left: 5%;
   position: absolute;
   border-radius: 50%;
}
.ck-content .image::after {
   content: '';
   width: 200%;
   height: 200%;
   background-image: url(../../assets/img/image-context.svg);
   background-size: contain;
   background-repeat: no-repeat;
   position: absolute;
   top: -60%;
   pointer-events: none;
   left: -60%;
}

/* Defining the default content styles for the inline images.
This is what the newly inserted image without any
style-specific class will look like. */
.ck-content .image-inline {
   margin: 0 4px;
   vertical-align: middle;
   border-radius: 12px;
}
.ck-content .image-inline img {
   width: 24px;
   max-height: 24px;
   min-height: 24px;
   filter: grayscale(100%);
}

/* Defining the custom content styles for the images
placed on the side of the editing area. */
.ck-content .image.image-side {
   float: right;
   margin-right: -200px;
   margin-left: 50px;
   margin-top: -50px;
}
.ck-content .image.image-side img {
   width: 360px;
   height: 360px;
}

/* Defining the custom content styles for the images
placed on the editor margins. */
.ck-content .image-inline.image-margin-left,
.ck-content .image-inline.image-margin-right {
   position: absolute;
   margin: 0;
   top: auto;
}
.ck-content .image-inline.image-margin-left {
   left: calc( -12.5% - var(--icon-size) / 2 );
}
.ck-content .image-inline.image-margin-right {
   right: calc( -12.5% - var(--icon-size) / 2 );
}
.ck-content .image-inline.image-margin-left img,
.ck-content .image-inline.image-margin-right img {
   filter: none;
}

/* Defining the custom content styles for the image captions. */
.ck-content .image > figcaption {
   z-index: 1;
   position: absolute;
   bottom: 20px;
   left: -20px;
   font-style: italic;
   border-radius: 41px;
   background-color: #ffffffe8;
   color: #1138b0;
   padding: 5px 12px;
   font-size: 13px;
   box-shadow: 0 0 18px #1a1a1a26
}