@vcui-panel-window-font-size: 14px;
@vcui-panel-window-frame-size: 7px;
@vcui-panel-window-frame-color: transparent;
@vcui-panel-window-main-background: #fff;
@vcui-panel-window-main-color: #5e5e5e;

.vc_ui-panel-window {
  box-sizing: content-box;
  font-size: @vcui-panel-window-font-size;
  font-family: @wpb_font-family-primary;
  padding: @vcui-panel-window-frame-size;
  background: @vcui-panel-window-frame-color;
}

.vc_ui-panel-window-inner {
  background: @vcui-panel-window-main-background;
  color: @vcui-panel-window-main-color;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, .25);
  position: relative;
  max-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: stretch;
  flex-basis: 100%;
  min-width: 0; // Allow flex children to shrink below content size
  > .vc_ui-panel-header-container,
  > .vc_ui-panel-footer-container {
    flex: 0 0 auto;
  }
  > .vc_ui-panel-content-container {
    flex: 1 1 auto;
    position: relative;
  }
}

// minimized window
.vc_ui-panel-window {
  &.vc_minimized {
    &:not(.vc_animating) {
      .vc_ui-panel-header-content,
      .vc_ui-panel-content-container,
      .vc_ui-panel-footer-container {
        display: none;
      }
      .vc_ui-minimize-button {
        transform: scaleY(-1);
      }
    }
  }
  &.vc_animating {
    .vc_ui-panel-window-inner {
      overflow: hidden;
    }
    &:not(.vc_minimized) {
      .vc_ui-minimize-button {
        transform: scaleY(-1);
      }
    }
  }
}

// Hide move icon for non-draggable panels (e.g. add element, template library)
.vc_ui-panel-window:not(.ui-draggable) {
  .vc_ui-panel-header-heading .vc-composer-icon {
    display: none;
  }
}

@media (max-width: @screen-xs-max) {
  .vc_ui-panel-window {
    box-sizing: border-box !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: none !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    &.vc_active {
      display: block !important;
    }

    // don't allow minimizing on mobile
    .vc_ui-minimize-button {
      display: none !important;
    }

    // always unminimized on mobile
    .vc_ui-panel-header-content,
    .vc_ui-panel-content-container,
    .vc_ui-panel-footer-container {
      display: block !important;
    }
  }
}
