.ContentEditDrawer {
  display: none;

  &.is-open {
    background: var(--color-white);
    bottom: 0;
    box-shadow: var(--shadow-3);
    display: inline;
    left: 0;
    overflow: hidden;
    padding: 0;
    position: fixed;
    transition: width var(--time-m) var(--ease-out);
    width: 100%;
    z-index: 10;

    .ContentEditDrawer-header {
      align-items: center;
      background: var(--color-gray2);
      display: flex;
      padding-right: var(--gap-m);

      .closeButton {
        position: relative;

        &::before {
          padding: 0;
        }
      }

      .Widget-title {
        flex-grow: 1;
      }
    }

    .ContentEditDrawer-widget {
      background: var(--color-gray1);
      border-style: solid;
      margin-bottom: calc(var(--gap-l) * 3.5);

      &-carousel {
        background: var(--color-white);
        margin: 0;
        padding: 0;

        > .CIG {
          overflow-x: scroll;
          overflow-y: hidden;
          padding: var(--gap-m) 0;

          > .CIG-row {
            padding: 0;

            > .CIG-label {
              display: none;
            }

            > .CIG-large {
              margin: 0;

              > .RCIG-list {
                li.message-warning {
                  border: 0;
                  margin: calc(var(--gap-l) + var(--gap-xs)) var(--gap-l);
                  width: 100%;

                  &::before {
                    box-shadow: none;
                    margin-left: var(--gap-l);
                    top: calc(var(--gap-s) + var(--gap-xs));
                  }
                }
              }
            }

            .ContentEditDrawer-widget-carousel-list {
              border: none;
              display: flex;
              margin: 0;
              padding: 0;
              position: relative;

              li:first-child {
                margin-left: var(--gap-l);
              }

              &-item.Sortable-chosen,
              &-item.Sortable-ghost,
              &-item.Sortable-selected {
                background: var(--color-blue2);
                border: 2px solid var(--color-blue5) !important;
              }

              .ContentEditDrawer-widget-carousel-list-item-selectButton {
                color: var(--color-black);
              }

              .ContentEditDrawer-widget-carousel-list-item-moreInfoButton {
                color: var(--color-black);
              }

              &-item {
                cursor: pointer;
                height: 6em;
                margin-right: var(--gap-m);
                max-width: 10em;
                min-width: 10em;

                &-selectButton {
                  .Checkbox;

                  background: transparent;
                  position: absolute;
                  right: var(--gap-xs);
                  top: var(--gap-xs);
                  visibility: hidden;
                  z-index: 1;

                  &:checked {
                    &::before {
                      border: none;
                    }

                    &::after {
                      content: 'check_box';
                      visibility: visible;
                    }
                  }
                }

                &-moreInfoButton {
                  bottom: calc(var(--gap-s) + var(--gap-xs));
                  height: var(--Icon-size);
                  opacity: unset;
                  position: absolute;
                  right: var(--gap-xs);
                  visibility: hidden;
                  width: var(--Icon-size);

                  &::before {
                    padding: 0;
                  }

                  &.is-active {
                    visibility: visible;
                  }
                }

                &:hover,
                &:focus-within {
                  .ContentEditDrawer-widget-carousel-list-item-selectButton,
                  .ContentEditDrawer-widget-carousel-list-item-moreInfoButton {
                    visibility: visible;
                  }
                }

                &.is-hidden {
                  content-visibility: hidden;
                }

                &::before {
                  border-bottom: 1px solid var(--color-gray2);
                  box-shadow: none;
                }

                &.has-image {
                  &::before {
                    background: linear-gradient(
                      0deg,
                      var(--color-black) calc(0px - var(--gap-xl)),
                      transparent var(--gap-l),
                      transparent calc(var(--gap-xl) + var(--gap-l)),
                      var(--color-black) calc(var(--gap-xl) * 3)
                    );
                  }

                  .ContentEditDrawer-widget-carousel-list-item-moreInfoButton {
                    color: var(--color-white);
                  }

                  .ContentEditDrawer-widget-carousel-list-item-selectButton {
                    color: var(--color-white);
                  }
                }

                &.is-added {
                  background: var(--color-white) !important;
                }

                &.is-added.Sortable-selected {
                  background: var(--color-blue2) !important;
                }

                &.Sortable-selected,
                &.Sortable-chosen {
                  .ContentEditDrawer-widget-carousel-list-item-title {
                    background: var(--color-blue2) !important;
                  }
                }

                &-title {
                  background: var(--color-white) !important;
                  -webkit-box-orient: vertical;
                  display: -webkit-box;
                  font-size: var(--fontSize-s);
                  -webkit-line-clamp: 3;
                  line-height: var(--lineHeight-s);
                  overflow: hidden;
                  padding: var(--gap-s) var(--gap-xl) 0 var(--gap-s);
                  white-space: normal;

                  &::before {
                    display: none !important;
                  }
                }

                &-image {
                  height: 100%;
                  object-fit: cover;
                  width: 100%;

                  + .ContentEditDrawer-widget-carousel-list-item-type {
                    &::before {
                      color: var(--color-white);
                      padding: calc(var(--gap-xs) / 2);
                    }

                    .ContentEditDrawer-widget-carousel-list-item-type-name {
                      display: none;
                    }
                  }
                }

                &-type {
                  bottom: 0;
                  color: var(--color-gray5);
                  font-size: var(--fontSize-s);
                  left: var(--gap-s);
                  padding-bottom: var(--gap-xs);
                  position: absolute;

                  &::before {
                    .Icon;
                    .Icon.is-s;
                  }

                  &[data-icon-name]::before {
                    content: attr(data-icon-name);
                    padding-right: var(--gap-xs);
                  }
                }
              }
            }

            .RCIG-remove,
            .RCIG-controls,
            .MultiSortable-buttonToggle {
              display: none;
            }
          }
        }
      }

      &-filters {
        background: var(--color-gray1);
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap-l);
        padding: var(--gap-s) var(--gap-l);

        .queryRestrictions {
          display: flex;
          flex-wrap: wrap;
          font-size: var(--fontSize-s);
          gap: var(--gap-l);
        }

        .ComboInput {
          align-items: center;
          border: none;
          font-size: var(--fontSize-s);
          padding-right: calc(3 * var(--gap-xl));
          width: unset;

          &::before {
            size: var(--fontSize-xl);
          }

          .ComboInput-icon::after {
            bottom: calc(
              2px + var(--gap-s) + (var(--Text-height) - var(--Icon-size)) / 2
            );
          }
        }

        &-sourceType {
          &-customFilters {
            display: flex;
            flex-wrap: wrap;
            gap: var(--gap-l);
          }
        }
      }
    }
  }
}

@media (@mq-m) {
  .ContentEditDrawer.is-open {
    width: calc(100% - var(--Icon-size) - var(--gap-s) * 2 - var(--gap-m) * 2);

    .ContentEditDrawer-widget {
      margin-bottom: 0;
    }
  }
}

@media (@mq-xl) {
  .ContentEditDrawer {
    .ContentEditDrawer-widget-carousel
      > .CIG
      > .CIG-row
      > .CIG-large
      > .RCIG-list
      li.message-warning {
      margin: calc(var(--gap-l) - calc(var(--gap-xs) / 2)) var(--gap-l);
    }
  }
}
