@ckeditor/ckeditor5-image 48.8.1-alpha.3 → 49.0.0-alpha.0

package/dist/index.css

@@ -2,40 +2,17 @@
  * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-:root {
+:root, :host {
   --ck-content-color-image-caption-background: #f7f7f7;
-  --ck-content-color-image-caption-text: #333;
   --ck-color-image-caption-highlighted-background: #fd0;
 }
 
-.ck-content .image > figcaption {
-  caption-side: bottom;
-  word-break: normal;
-  overflow-wrap: anywhere;
-  break-before: avoid;
-  color: var(--ck-content-color-image-caption-text);
-  background-color: var(--ck-content-color-image-caption-background);
-  outline-offset: -1px;
-  padding: .6em;
-  font-size: .75em;
-  display: table-caption;
-}
-
-@media (forced-colors: active) {
-  .ck-content .image > figcaption {
-    background-color: unset;
-    color: unset;
-  }
-}
-
-@media (forced-colors: none) {
-  .ck.ck-editor__editable .image > figcaption.image__caption_highlighted {
+.ck.ck-editor__editable .image > figcaption.image__caption_highlighted {
+  @media (forced-colors: none) {
     animation: .6s ease-out ck-image-caption-highlight;
   }
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .ck.ck-editor__editable .image > figcaption.image__caption_highlighted {
+  @media (prefers-reduced-motion: reduce) {
     animation: none;
   }
 }
@@ -50,146 +27,49 @@
   }
 }
 
-.ck-content img.image_resized {
-  height: auto;
-}
-
-.ck-content .image.image_resized {
-  box-sizing: border-box;
-  max-width: 100%;
-  display: block;
-}
-
-.ck-content .image.image_resized img {
-  width: 100%;
-}
-
-.ck-content .image.image_resized > figcaption {
-  display: block;
-}
-
-:is(.ck.ck-editor__editable td, .ck.ck-editor__editable th) .image-inline.image_resized img {
-  max-width: 100%;
+.ck.ck-editor__editable {
+  & td, & th {
+    & .image-inline.image_resized img {
+      max-width: 100%;
+    }
+  }
 }
 
 [dir="ltr"] .ck.ck-button.ck-button_with-text.ck-resize-image-button .ck-button__icon {
-  margin-right: var(--ck-spacing-standard);
+  margin-right: var(--ck-spacing-standard, var(--ck-spacing-base));
 }
 
 [dir="rtl"] .ck.ck-button.ck-button_with-text.ck-resize-image-button .ck-button__icon {
-  margin-left: var(--ck-spacing-standard);
+  margin-left: var(--ck-spacing-standard, var(--ck-spacing-base));
 }
 
 .ck.ck-dropdown .ck-button.ck-resize-image-button .ck-button__label {
   width: 4em;
 }
 
-:root {
-  --ck-content-image-style-spacing: 1.5em;
-  --ck-content-inline-image-style-spacing: calc(var(--ck-content-image-style-spacing) / 2);
-}
-
-.ck-content .image.image-style-block-align-left, .ck-content .image.image-style-block-align-right {
-  max-width: calc(100% - var(--ck-content-image-style-spacing));
-}
+.ck.ck-editor__editable {
+  & .image, & .image-inline {
+    &.ck-appear {
+      animation: .7s fadeIn;
 
-.ck-content .image.image-style-align-left, .ck-content .image.image-style-align-right {
-  clear: none;
-}
+      @media (prefers-reduced-motion: reduce) {
+        opacity: 1;
+        animation: none;
+      }
+    }
 
-.ck-content .image.image-style-side {
-  float: right;
-  margin-left: var(--ck-content-image-style-spacing);
-  max-width: 50%;
-}
-
-.ck-content .image.image-style-align-left {
-  float: left;
-  margin-right: var(--ck-content-image-style-spacing);
-}
-
-.ck-content .image.image-style-align-right {
-  float: right;
-  margin-left: var(--ck-content-image-style-spacing);
-}
-
-.ck-content .image.image-style-block-align-right {
-  margin-left: auto;
-  margin-right: 0;
-}
-
-.ck-content .image.image-style-block-align-left {
-  margin-left: 0;
-  margin-right: auto;
-}
-
-.ck-content .image-style-align-center {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.ck-content .image-style-align-left {
-  float: left;
-  margin-right: var(--ck-content-image-style-spacing);
-}
-
-.ck-content .image-style-align-right {
-  float: right;
-  margin-left: var(--ck-content-image-style-spacing);
-}
-
-.ck-content p + .image.image-style-align-left, .ck-content p + .image.image-style-align-right, .ck-content p + .image.image-style-side {
-  margin-top: 0;
-}
-
-.ck-content .image-inline.image-style-align-left, .ck-content .image-inline.image-style-align-right {
-  margin-top: var(--ck-content-inline-image-style-spacing);
-  margin-bottom: var(--ck-content-inline-image-style-spacing);
-}
-
-.ck-content .image-inline.image-style-align-left {
-  margin-right: var(--ck-content-inline-image-style-spacing);
-}
-
-.ck-content .image-inline.image-style-align-right {
-  margin-left: var(--ck-content-inline-image-style-spacing);
-}
-
-:is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__action:not(.ck-disabled), :is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__arrow:not(.ck-disabled), :is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover) {
-  background-color: var(--ck-color-button-on-background);
-}
-
-:is(:is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__action:not(.ck-disabled), :is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__arrow:not(.ck-disabled), :is(.ck.ck-splitbutton.ck-splitbutton_flatten:hover, .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open) > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover)):after {
-  display: none;
-}
-
-.ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open:hover > .ck-splitbutton__action:not(.ck-disabled), .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open:hover > .ck-splitbutton__arrow:not(.ck-disabled), .ck.ck-splitbutton.ck-splitbutton_flatten.ck-splitbutton_open:hover > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover) {
-  background-color: var(--ck-color-button-on-hover-background);
-}
-
-:is(.ck.ck-editor__editable .image, .ck.ck-editor__editable .image-inline).ck-appear {
-  animation: .7s fadeIn;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :is(.ck.ck-editor__editable .image, .ck.ck-editor__editable .image-inline).ck-appear {
-    opacity: 1;
-    animation: none;
+    position: relative;
   }
-}
 
-.ck.ck-editor__editable .image, .ck.ck-editor__editable .image-inline {
-  position: relative;
-}
-
-.ck.ck-editor__editable .image .ck-progress-bar, .ck.ck-editor__editable .image-inline .ck-progress-bar {
-  background: var(--ck-color-upload-bar-background);
-  width: 0;
-  height: 2px;
-  transition: width .1s;
-  position: absolute;
-  top: 0;
-  left: 0;
+  & .image .ck-progress-bar, & .image-inline .ck-progress-bar {
+    background: var(--ck-color-upload-bar-background);
+    width: 0;
+    height: 2px;
+    transition: width .1s;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
 }
 
 @keyframes fadeIn {
@@ -202,9 +82,9 @@
   }
 }
 
-:root {
-  --ck-color-image-upload-icon: #fff;
-  --ck-color-image-upload-icon-background: #008a00;
+:root, :host {
+  --ck-color-image-upload-icon: var(--ck-color-base-background);
+  --ck-color-image-upload-icon-background: var(--ck-color-base-success);
   --ck-image-upload-icon-size: 20;
   --ck-image-upload-icon-width: 2px;
   --ck-image-upload-icon-is-visible: clamp(0px, 100% - 50px, 1px);
@@ -216,8 +96,8 @@
   font-size: calc(1px * var(--ck-image-upload-icon-size));
   width: calc(var(--ck-image-upload-icon-is-visible) * var(--ck-image-upload-icon-size));
   height: calc(var(--ck-image-upload-icon-is-visible) * var(--ck-image-upload-icon-size));
-  top: min(var(--ck-spacing-medium), 6%);
-  right: min(var(--ck-spacing-medium), 6%);
+  top: min(var(--ck-spacing-medium, var(--ck-spacing-base)), 6%);
+  right: min(var(--ck-spacing-medium, var(--ck-spacing-base)), 6%);
   border-radius: 50%;
   animation-name: ck-upload-complete-icon-show, ck-upload-complete-icon-hide;
   animation-duration: .5s, .5s;
@@ -226,41 +106,37 @@
   display: block;
   position: absolute;
   overflow: hidden;
-}
 
-.ck-image-upload-complete-icon:after {
-  opacity: 0;
-  transform-origin: 0 0;
-  border-top: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
-  border-right: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
-  box-sizing: border-box;
-  content: "";
-  width: 0;
-  height: 0;
-  animation-name: ck-upload-complete-icon-check;
-  animation-duration: .5s;
-  animation-delay: .5s;
-  animation-fill-mode: forwards;
-  position: absolute;
-  top: 50%;
-  left: 25%;
-  transform: scaleX(-1) rotate(135deg);
-}
+  &:after {
+    opacity: 0;
+    transform-origin: 0 0;
+    border-top: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
+    border-right: var(--ck-image-upload-icon-width) solid var(--ck-color-image-upload-icon);
+    box-sizing: border-box;
+    content: "";
+    width: 0;
+    height: 0;
+    animation-name: ck-upload-complete-icon-check;
+    animation-duration: .5s;
+    animation-delay: .5s;
+    animation-fill-mode: forwards;
+    position: absolute;
+    top: 50%;
+    left: 25%;
+    transform: scaleX(-1) rotate(135deg);
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .ck-image-upload-complete-icon {
+  @media (prefers-reduced-motion: reduce) {
     animation-duration: 0s;
-  }
 
-  .ck-image-upload-complete-icon:after {
-    opacity: 1;
-    width: .3em;
-    height: .45em;
-    animation: none;
+    &:after {
+      opacity: 1;
+      width: .3em;
+      height: .45em;
+      animation: none;
+    }
   }
-}
 
-.ck-image-upload-complete-icon {
   z-index: 1;
 }
 
@@ -303,7 +179,7 @@
   }
 }
 
-:root {
+:root, :host {
   --ck-color-upload-placeholder-loader: #b3b3b3;
   --ck-upload-placeholder-loader-size: 32px;
   --ck-upload-placeholder-image-aspect-ratio: 2.8;
@@ -312,14 +188,14 @@
 .ck .ck-image-upload-placeholder {
   width: 100%;
   margin: 0;
-}
 
-.ck .ck-image-upload-placeholder.image-inline {
-  width: calc(2 * var(--ck-upload-placeholder-loader-size) * var(--ck-upload-placeholder-image-aspect-ratio));
-}
+  &.image-inline {
+    width: calc(2 * var(--ck-upload-placeholder-loader-size) * var(--ck-upload-placeholder-image-aspect-ratio));
+  }
 
-.ck .ck-image-upload-placeholder img {
-  aspect-ratio: var(--ck-upload-placeholder-image-aspect-ratio);
+  & img {
+    aspect-ratio: var(--ck-upload-placeholder-image-aspect-ratio);
+  }
 }
 
 .ck .ck-upload-placeholder-loader {
@@ -330,20 +206,18 @@
   display: flex;
   position: absolute;
   top: 0;
-}
 
-.ck .ck-upload-placeholder-loader:before {
-  width: var(--ck-upload-placeholder-loader-size);
-  height: var(--ck-upload-placeholder-loader-size);
-  border-top: 3px solid var(--ck-color-upload-placeholder-loader);
-  content: "";
-  border-right: 2px solid #0000;
-  border-radius: 50%;
-  animation: 1s linear infinite ck-upload-placeholder-loader;
-  position: relative;
-}
+  &:before {
+    width: var(--ck-upload-placeholder-loader-size);
+    height: var(--ck-upload-placeholder-loader-size);
+    border-top: 3px solid var(--ck-color-upload-placeholder-loader);
+    content: "";
+    border-right: 2px solid #0000;
+    border-radius: 50%;
+    animation: 1s linear infinite ck-upload-placeholder-loader;
+    position: relative;
+  }
 
-.ck .ck-upload-placeholder-loader {
   left: 0;
 }
 
@@ -353,170 +227,290 @@
   }
 }
 
-.ck-content .image {
-  clear: both;
-  text-align: center;
-  min-width: 50px;
-  margin: .9em auto;
-  display: table;
-}
+.ck.ck-editor__editable {
+  & .image > figcaption.ck-placeholder:before {
+    padding-left: inherit;
+    padding-right: inherit;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
 
-.ck-content .image img {
-  min-width: 100%;
-  max-width: 100%;
-  height: auto;
-  margin: 0 auto;
-  display: block;
-}
+  & .image {
+    z-index: 1;
 
-.ck-content .image-inline {
-  align-items: flex-start;
-  max-width: 100%;
-  display: inline-flex;
-}
+    &.ck-widget_selected {
+      z-index: 2;
+    }
+  }
 
-.ck-content .image-inline picture {
-  display: flex;
-}
+  & .image-inline {
+    z-index: 1;
 
-.ck-content .image-inline picture, .ck-content .image-inline img {
-  flex-grow: 1;
-  flex-shrink: 1;
-  max-width: 100%;
-}
+    &.ck-widget_selected {
+      z-index: 2;
 
-.ck.ck-editor__editable .image > figcaption.ck-placeholder:before {
-  padding-left: inherit;
-  padding-right: inherit;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
+      & ::selection {
+        display: none;
+      }
+    }
+  }
 
-.ck.ck-editor__editable .image {
-  z-index: 1;
-}
+  & .image-inline img {
+    height: auto;
+  }
 
-.ck.ck-editor__editable .image.ck-widget_selected {
-  z-index: 2;
+  & td, & th {
+    & .image-inline img {
+      max-width: none;
+    }
+  }
 }
 
-.ck.ck-editor__editable .image-inline {
-  z-index: 1;
+.ck.ck-editor__editable {
+  & img.image_placeholder {
+    background-size: 100% 100%;
+  }
 }
 
-.ck.ck-editor__editable .image-inline.ck-widget_selected {
-  z-index: 2;
+:root, :host {
+  --ck-image-insert-insert-by-url-width: var(--ck-width-md);
+  --ck-image-insert-form-padding: var(--ck-spacing-padding);
+  --ck-image-insert-form-button-gap: var(--ck-spacing-gap-tight);
 }
 
-.ck.ck-editor__editable .image-inline.ck-widget_selected ::selection {
-  display: none;
-}
+.ck.ck-image-insert-url {
+  --ck-input-width: 100%;
+  width: 400px;
 
-.ck.ck-editor__editable .image-inline img {
-  height: auto;
-}
+  & .ck-image-insert-url__action-row {
+    grid-column-gap: var(--ck-spacing-large, var(--ck-spacing-lg));
+    margin-top: var(--ck-spacing-large, var(--ck-spacing-lg));
+    display: grid;
 
-:is(.ck.ck-editor__editable td, .ck.ck-editor__editable th) .image-inline img {
-  max-width: none;
-}
+    &:empty {
+      margin-top: 0;
+    }
 
-.ck.ck-editor__editable img.image_placeholder {
-  background-size: 100% 100%;
-}
+    & .ck-button-save, & .ck-button-cancel {
+      justify-content: center;
+      min-width: auto;
+    }
 
-:root {
-  --ck-image-insert-insert-by-url-width: 250px;
-}
+    & .ck-button .ck-button__label {
+      color: var(--ck-color-text);
+    }
 
-.ck.ck-image-insert-url {
-  --ck-input-width: 100%;
-  width: 400px;
-}
+    grid-template-columns: repeat(2, 1fr);
+  }
 
-.ck.ck-image-insert-url .ck-image-insert-url__action-row {
-  grid-column-gap: var(--ck-spacing-large);
-  margin-top: var(--ck-spacing-large);
-  display: grid;
+  padding: var(--ck-dialog-content-padding);
 }
 
-.ck.ck-image-insert-url .ck-image-insert-url__action-row .ck-button-save, .ck.ck-image-insert-url .ck-image-insert-url__action-row .ck-button-cancel {
-  justify-content: center;
-  min-width: auto;
-}
+.ck.ck-image-insert-form {
+  padding: var(--ck-image-insert-form-padding);
 
-.ck.ck-image-insert-url .ck-image-insert-url__action-row .ck-button .ck-button__label {
-  color: var(--ck-color-text);
-}
+  & > .ck.ck-button {
+    width: 100%;
+    display: block;
 
-.ck.ck-image-insert-url .ck-image-insert-url__action-row {
-  grid-template-columns: repeat(2, 1fr);
-}
+    [dir="ltr"] & {
+      text-align: left;
+    }
 
-.ck.ck-image-insert-url {
-  padding: var(--ck-spacing-large) var(--ck-spacing-large) 0;
-}
+    [dir="rtl"] & {
+      text-align: right;
+    }
 
-.ck.ck-image-insert-form > .ck.ck-button {
-  width: 100%;
-  display: block;
-}
+    &:not(:last-child) {
+      margin-bottom: var(--ck-image-insert-form-button-gap);
+    }
+  }
 
-[dir="ltr"] :is(.ck.ck-image-insert-form > .ck.ck-button) {
-  text-align: left;
-}
+  & > .ck.ck-collapsible {
+    &:not(:first-child) {
+      border-top: 1px solid var(--ck-color-base-border);
+    }
 
-[dir="rtl"] :is(.ck.ck-image-insert-form > .ck.ck-button) {
-  text-align: right;
-}
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--ck-color-base-border);
+    }
+
+    min-width: var(--ck-image-insert-insert-by-url-width);
+  }
 
-.ck.ck-image-insert-form > .ck.ck-collapsible:not(:first-child) {
-  border-top: 1px solid var(--ck-color-base-border);
+  &:focus {
+    outline: none;
+  }
 }
 
-.ck.ck-image-insert-form > .ck.ck-collapsible:not(:last-child) {
-  border-bottom: 1px solid var(--ck-color-base-border);
+:root, :host {
+  --ck-image-custom-resize-form-width: var(--ck-width-balloon-form);
 }
 
-.ck.ck-image-insert-form > .ck.ck-collapsible {
-  min-width: var(--ck-image-insert-insert-by-url-width);
+.ck.ck-image-custom-resize-form {
+  &.ck-responsive-form {
+    width: var(--ck-image-custom-resize-form-width);
+  }
 }
 
-.ck.ck-image-insert-form > .ck.ck-image-insert-url {
-  min-width: var(--ck-image-insert-insert-by-url-width);
-  padding: var(--ck-spacing-large);
+:root, :host {
+  --ck-text-alternative-form-width: var(--ck-width-balloon-form);
 }
 
-.ck.ck-image-insert-form:focus {
-  outline: none;
+.ck.ck-text-alternative-form {
+  &.ck-responsive-form {
+    width: var(--ck-text-alternative-form-width);
+  }
 }
 
-:root {
-  --ck-image-custom-resize-form-width: 340px;
+:root, :host {
+  --ck-content-color-image-caption-background: #f7f7f7;
+  --ck-content-color-image-caption-text: #333;
+  --ck-content-image-style-spacing: 1.5em;
+  --ck-content-inline-image-style-spacing: calc(var(--ck-content-image-style-spacing) / 2);
 }
 
-@media screen and (width <= 600px) {
-  :root {
-    --ck-image-custom-resize-form-width: 300px;
+.ck-content .image > figcaption {
+  caption-side: bottom;
+  word-break: normal;
+  overflow-wrap: anywhere;
+  break-before: avoid;
+  color: var(--ck-content-color-image-caption-text);
+  background-color: var(--ck-content-color-image-caption-background);
+  outline-offset: -1px;
+  padding: .6em;
+  font-size: .75em;
+  display: table-caption;
+
+  @media (forced-colors: active) {
+    background-color: unset;
+    color: unset;
   }
 }
 
-.ck.ck-image-custom-resize-form.ck-responsive-form {
-  width: var(--ck-image-custom-resize-form-width);
+.ck-content img.image_resized {
+  height: auto;
 }
 
-:root {
-  --ck-text-alternative-form-width: 340px;
+.ck-content .image.image_resized {
+  box-sizing: border-box;
+  max-width: 100%;
+  display: block;
+
+  & img {
+    width: 100%;
+  }
+
+  & > figcaption {
+    display: block;
+  }
 }
 
-@media screen and (width <= 600px) {
-  :root {
-    --ck-text-alternative-form-width: 300px;
+.ck-content {
+  & .image {
+    &.image-style-block-align-left, &.image-style-block-align-right {
+      max-width: calc(100% - var(--ck-content-image-style-spacing));
+    }
+
+    &.image-style-align-left, &.image-style-align-right {
+      clear: none;
+    }
+
+    &.image-style-side {
+      float: right;
+      margin-left: var(--ck-content-image-style-spacing);
+      max-width: 50%;
+    }
+
+    &.image-style-align-left {
+      float: left;
+      margin-right: var(--ck-content-image-style-spacing);
+    }
+
+    &.image-style-align-right {
+      float: right;
+      margin-left: var(--ck-content-image-style-spacing);
+    }
+
+    &.image-style-block-align-right {
+      margin-left: auto;
+      margin-right: 0;
+    }
+
+    &.image-style-block-align-left {
+      margin-left: 0;
+      margin-right: auto;
+    }
+  }
+
+  & .image-style-align-center {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  & .image-style-align-left {
+    float: left;
+    margin-right: var(--ck-content-image-style-spacing);
+  }
+
+  & .image-style-align-right {
+    float: right;
+    margin-left: var(--ck-content-image-style-spacing);
+  }
+
+  & p + .image.image-style-align-left, & p + .image.image-style-align-right, & p + .image.image-style-side {
+    margin-top: 0;
+  }
+
+  & .image-inline {
+    &.image-style-align-left, &.image-style-align-right {
+      margin-top: var(--ck-content-inline-image-style-spacing);
+      margin-bottom: var(--ck-content-inline-image-style-spacing);
+    }
+
+    &.image-style-align-left {
+      margin-right: var(--ck-content-inline-image-style-spacing);
+    }
+
+    &.image-style-align-right {
+      margin-left: var(--ck-content-inline-image-style-spacing);
+    }
   }
 }
 
-.ck.ck-text-alternative-form.ck-responsive-form {
-  width: var(--ck-text-alternative-form-width);
+.ck-content {
+  & .image {
+    clear: both;
+    text-align: center;
+    min-width: 50px;
+    margin: .9em auto;
+    display: table;
+
+    & img {
+      min-width: 100%;
+      max-width: 100%;
+      height: auto;
+      margin: 0 auto;
+      display: block;
+    }
+  }
+
+  & .image-inline {
+    align-items: flex-start;
+    max-width: 100%;
+    display: inline-flex;
+
+    & picture {
+      display: flex;
+    }
+
+    & picture, & img {
+      flex-grow: 1;
+      flex-shrink: 1;
+      max-width: 100%;
+    }
+  }
 }
 
 /*# sourceMappingURL=index.css.map */