.squatch-container-popup {
  .box-shadow(0 2px 4px rgba(0,0,0,.5));
  background: @white;
  height: 486px;
  overflow: hidden;

  &,
  #squatch-panel {
    background: @white;
  }

  // Box shadow alternative for lesser "browsers"
  html.lt-ie9 & {
    border: 1px solid @gray-lighter;
  }
}

.squatch-header-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: transparent;
  border: 0;
  color: @blue;
  font-size: @font-size-xs;

  &:hover {
    text-decoration: underline;
  }
}

.squatch-actions {
  .translate(0, 0);
  .transition-transform(.3s cubic-bezier(0,0,.58,1));
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 120;
  background: @white;
  text-align: center;
  padding: 15px @body-padding 0;

  #squatch-panel.open + & {
    .translate(0, 81px);

    html.lt-ie9 & {
      display: none;
    }
  }
}

.squatch-container-popup {
  .box-shadow(0 2px 4px rgba(0,0,0,.5));
  background: @white;
  height: 486px;
  overflow: hidden;

  // Disable responsive view on popup temporarily.
  // This is due to the popup being displayed inconsistently - with responsive styles activated, sometimes the mobile view will be displayed, even on a desktop monitor with more than 500 pixels width. The solution may be to set the iframe width to the full browser width, rather than the width of the widget theme.
  // TODO: Find a solution for this and enable responsive styles again.
  width: @container-width;

  &,
  #squatch-panel {
    background: @white;
  }

  // Box shadow alternative for lesser "browsers"
  html.lt-ie9 & {
    border: 1px solid @gray-lighter;
  }
}

.squatch-header-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: transparent;
  border: 0;
  color: @blue;
  font-size: @font-size-xs;

  &:hover {
    text-decoration: underline;
  }
}

.squatch-actions {
  .translate(0, 0);
  .transition-transform(.3s cubic-bezier(0,0,.58,1));
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 120;
  background: @white;
  text-align: center;
  padding: 15px @body-padding 0;

  #squatch-panel.open + & {
    .translate(0, 81px);

    html.lt-ie9 & {
      display: none;
    }
  }
}

Disable mobile view on popups
Disable mobile view on popups

This sets the container width on the widget, which should cause the iframe
around the widget to be resized to at least 500 pixels. This will mean that
none of the mobile media queries will apply, disabling the mobile view for the
widget.

The motivation for this was the inconsistent display of the popup. Sometimes the
mobile view would be displayed and sometimes the desktop view would be. This is
due to the width dependencies of the iframe and the widget. The iframe is set up
to automatically adjust to the width of the widget, which is based on the width
of the container (in this case the iframe) in the mobile view (less than 500px).
So if the container starts out at a smaller size, this would subsequently cause
the widget to resize itself to 100% of that smaller size, and no further
resizing would occur, resulting in a mobile view being displayed in a
desktop-size window.

One solution to this problem may be to size the iframe to 100% of the browser
window, creating a large enough container for the widget.

This is just a temporary solution until we find a way to allow responsive styles
on the popup.
