#portal {
  position: fixed;
  top: 0;
}

html {
  /* set base font size to 13px */
  font-size: 50.782% !important;
}

body {
  color: var(--mu-colors-foreground-text-neutral-plain) !important;
  overscroll-behavior-y: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  scrollbar-width: none;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}

.animate-copy {
  animation: pulse 0.2s;
  transition: all 0.2s;
}

.remove-icon-background svg {
  background: none !important;
}

.remove-content-padding-top .MuiCardContent-root {
  padding-top: 0 !important;
}

[id*="ScrollableDialog"] .infinite-scroll-component {
  overflow: hidden !important;
}

/* 
  TODO: Remove it when macaw will handle media queries in custom properties
  https://github.com/saleor/macaw-ui/issues/498
*/
@media screen and (max-width: 1024px) {
  .mobile-full-height {
    height: auto !important;
  }
}

[data-portal-for="category-list"] > ul > li {
  display: block;
}

[data-portal-for="category-list"] & li > span {
  display: inline;
}

.noBorder {
  border: none;
}
.ck.ck-video-insert__panel {
    padding: var(--ck-spacing-large);
}

.ck.ck-video-insert__ck-finder-button {
    display: block;
    width: 100%;
    margin: var(--ck-spacing-standard) auto;
    border: 1px solid hsl(0, 0%, 80%);
    border-radius: var(--ck-border-radius);
}

.ck.ck-splitbutton > .ck-file-dialog-button.ck-button {
    padding: 0;
    margin: 0;
    border: none;
}
.ck.ck-video-insert-form {
    &:focus {
        outline: none;
    }
}

.ck.ck-form__row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;

    & > *:not(.ck-label) {
        flex-grow: 1;
    }

    &.ck-video-insert-form__action-row {
        margin-top: var(--ck-spacing-standard);

        & .ck-button-save,
        & .ck-button-cancel {
            justify-content: center;
        }

        & .ck-button .ck-button__label {
            color: var(--ck-color-text);
        }
    }
}
.ck.ck-editor__editable .video {
    position: relative;
}

/* Upload progress bar. */
.ck.ck-editor__editable .video .ck-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
}
.ck-video-upload-complete-icon {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 50%;

    &::after {
         content: "";
         position: absolute;
     }
}
.ck .ck-upload-placeholder-loader {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;

    &::before {
         content: '';
         position: relative;
     }
}
.ck-content .video.video_resized {
    max-width: 100%;
    /*
    The `<figure>` element for resized videos must not use `display:table` as browsers do not support `max-width` for it well.
    See https://stackoverflow.com/questions/4019604/chrome-safari-ignoring-max-width-in-table/14420691#14420691 for more.
    Fortunately, since we control the width, there is no risk that the video will look bad.
    */
    display: block;
    box-sizing: border-box;

    & video {
          /* For resized videos it is the `<figure>` element that determines the video width. */
          width: 100%;
      }

    & > figcaption {
          /* The `<figure>` element uses `display:block`, so `<figcaption>` also has to. */
          display: block;
      }
}

[dir="ltr"] .ck.ck-button.ck-button_with-text.ck-resize-video-button .ck-button__icon {
    margin-right: var(--ck-spacing-standard);
}

[dir="rtl"] .ck.ck-button.ck-button_with-text.ck-resize-video-button .ck-button__icon {
    margin-left: var(--ck-spacing-standard);
}

.ck.ck-dropdown .ck-button.ck-resize-video-button .ck-button__label {
    width: 4em;
}
:root {
    --ck-video-style-spacing: 1.5em;
}

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

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

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

    & .video-style-align-right {
        float: right;
        margin-left: var(--ck-video-style-spacing);
    }
}
.ck-content .video {
    display: table;
    clear: both;
    text-align: center;
    margin: 1em auto;

    & video {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        min-width: 50px;
    }
}

.ck.ck-editor__editable .video > figcaption.ck-placeholder::before {
    position: static;
}