/* -------------------------- */
.cms-content-controls,
.toolbar--south {

  /* Styling for icons in controls */
  .icon-view, .preview-selector.dropdown a.chosen-single {
    white-space: nowrap;
    &:before {
      display:inline-block;
      float:left;
      width: 20px;
      overflow: hidden;
      color: $body-color-dark;
    }
  }

  /* Preview selectors. Overrides default chosen styles and applies its own */
  .preview-selector {
    float: right;
    display: flex;
    border-bottom:none;
    position:relative;
    box-shadow: none;
    margin: 0 -10px 0 10px;
    padding: 0;

    &.preview-mode-selector {
      .chosen-single {
        padding-right: 10px;

        > span {
          width: 44px;
        }

        > div {
          display: block;
          width: 20px;
        }
      }
    }

    .chosen-container {
      width: auto !important; //over-ride chosen inline styles for preview selector
    }

    .chosen-single {
      padding: 5px 4px 5px 10px;
      height: 32px;
      filter: none;  /* remove ie background */
      background: none;
      box-shadow: none;
      border-color: transparent;
      border-radius: $btn-border-radius;

      > span {
        margin-right: 0;
        font-size: 10px;
        line-height: 10px;
        vertical-align: top;
        color: #717171;
        white-space: normal;
        width: 0;
        display: inline-block;
      }

      &::before {
        font-size: 18px;
        line-height: 20px;
        vertical-align: middle;
        margin-right: 6px;
        display: inline-block;
      }

      &:hover, &.chosen-single-with-drop {
        background-color: #e4e8ec;
      }
      &.chosen-single-with-drop {
        border-radius: 0 0 3px 3px;
      }
      div {
        display: none;
      }
    }

    .chosen-container-active {
      .chosen-single {
        background-color: #e4e8ec;
      }
    }

    .chosen-with-drop .chosen-single div b {
      -ms-transform: rotate(180deg); /* IE 9 */
      -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
      transform: rotate(180deg);
    }

    // Rise up from bottom instead of down from top
    .chosen-drop {
      bottom: 32px !important;
      top: auto !important;
    }

    // Rise out from right, not from left (this needs to be done only when visible)
    .chosen-with-drop .chosen-drop {
      left: auto !important;
      right: 0 !important;
      width: auto !important;
    }

    .chosen-drop {
      padding: 0;
      margin-top: -5px;
      border: 1px solid $dropdown-border-color;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
      // width & right prevent overflow with non-firefox #1422
      width: inherit;
      right: 0;

      ul.chosen-results {
        padding: $dropdown-padding-y 0;
        margin: 0;
        overflow: visible;
        width: 160px;

        li {
          font-size: $font-size-base;
          line-height: $line-height-base;
          padding: $dropdown-item-padding-y $dropdown-item-padding-x;
          color: $body-color;
          background-color: $dropdown-bg;

          &:before {
            margin-right: 6px;
            margin-top: -2px;
            font-size: 16px;
            line-height: $line-height-base;
          }
          &.description {
            padding-top: 5px;
            padding-bottom: 5px;
            &:before {
              margin-top: 5px;
            }
          }
          &.highlighted, &:hover, &:focus {
            filter: none;
            background: $dropdown-link-hover-bg;
            text-decoration: none;
          }
          &.restricted { /* disable option (eg.split mode for smaller screen sizes) */
            color: #CCC;
            background-color: #EEE;
            pointer-events: none;
            &:before {
              opacity: 0.2;
            }
          }

          /* Description styling */
          span {
            display: block;
            color: $text-muted;
            font-size: 0.85em;
            line-height: 1.1em;
            padding-left: 23px;
          }
          .icon-view {
            margin-right: 4px;
          }
        }

        li.result-selected {
          background: $dropdown-link-active-bg;
          color: $component-active-color;

          &.highlighted, &:hover, &:focus, &::before {
            background: $dropdown-link-active-bg;
            color: $component-active-color;
          }
        }
      }
    }

    &.split-disabled {
      .chosen-drop ul.chosen-results li.font-icon-columns {
        &, &.highlighted, &:hover, &:focus {
          color: $text-muted;
          background: $component-active-color;
          pointer-events: none;
          cursor: default;
        }

        &::before {
          color: $text-muted;
        }
      }
    }

    .disabled-tooltip {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 32px;
      background: rgba(255, 255, 255, 0); // Prevent clicking on browsers that do not support pointer-events: none;

      &::before {
        content: 'Screen size too small';
        text-align: center;
        background: #555;
        color: white;
        padding: 4px 0;
        position: absolute;
        top: -24px;
        left: -1px;
        right: -1px;
        border-radius: 3px 3px 0 0;
        display: none;
        z-index: 2;
      }

      &::after {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        transform: rotate(45deg);
        display: none;
        background: #555;
        left: 47%;
        top: -6px;
      }

      &:hover::after,
      &:hover::before {
        display: block;
      }
    }
  }

  .cms-preview-states{
    float: right;
    select{
      max-width:150px;
    }

    &.dropdown{
      max-width:150px;
      a.chosen-single{
        span{
          margin:0;
        }
      }
      .chosen-container{
        max-width:150px;
      }
    }
  }
}

.toolbar--south > .btn-toolbar > .preview-selector  {
  margin-left: auto;
}

/* Styling for the preview screen sizes */
.preview__device {
  height: 100%;
}

.cms-preview {
  background-color: $body-bg;
  border-left: 1px solid $border-color-dark;
  position: relative;

  .cms-preview-overlay {
    width: 100%;
    height: 100%;
  }

  .preview-note {
    color: #CDD7DC;
    display: block;
    font-size: 22px;
    font-weight: bold;
    height: 82px;
    margin-top: -50px;
    margin-left: -150px;  /* half of width */
    position: absolute;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    top: 50%;
    left: 50%;
    width: 300px;
  }

  .panel {
    position: relative;
    height: calc(100vh - #{$toolbar-total-height});

    .preview-device-outer {
      height: 100%;
      width: 100%;
    }

    .preview-device-inner {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      background-color: $white;

      iframe {
        height: 100%;
        overflow-y: auto;
        width: 100%;
        border: 0;
      }
    }
  }

  &.mobile,
  &.tablet,
  &.desktop {
    .panel {
      background-color: $body-bg; /* cover website preview icon */
      overflow: auto;
    }

    .preview__device {
      margin: auto;
      text-align: center;
      height: auto;

      &::after {
        color: $text-muted;
        position: relative;
        top: -24px;
        transition: all .3s ease-in-out;
      }
    }

    .preview-device-outer {
      transition: all .3s ease-out;
      border-radius: 7px;
      background: lighten(#D2DBE0, 1%);
      border: 1px solid transparent;
      padding: $spacer;
      box-sizing: content-box;
      text-align: left;
      margin: $spacer auto #{$spacer * 2};
    }
  }

  &.mobile,
  &.tablet {
    .preview-device-outer {
      transform: rotate(0deg);
      transition: all .3s ease-in;
      overflow: hidden;

      &::after {
        content: 'Rotate';
        font-size: $font-size-xxs;
        text-transform: uppercase;
        color: darken(#D2DBE0, 25%);
        top: 0;
        right: $spacer;
        position: absolute;
        letter-spacing: .5px;
      }

      &:hover {
        background: darken(#D2DBE0, 10%);
        cursor: pointer;
      }

      &:hover::after {
        color: $white;
      }
    }

    .rotate {
      &::after {
        top: -148px;
      }

      .preview-device-outer {
        transform: rotate(-90deg);

        .preview-device-inner {
          transform: rotate(90deg);
        }
      }
    }

    .preview-device-inner {
      transform: rotate(0deg);
      transition: all .3s ease-out;
    }
  }

  &.mobile {
    .preview__device {
      min-width: calc(#{$mobile-width} + #{$spacer} * 4);

      &::after {
        content: '#{$mobile-width} x #{$mobile-height}';
      }
    }

    .preview-device-outer {
      min-height: $mobile-height;
      width: $mobile-width;
      height: $mobile-height;
      text-align: left;
    }

    .rotate {
      min-width: calc(#{$mobile-height} + #{$spacer} * 4);

      &::after {
        content: '#{$mobile-height} x #{$mobile-width}';
      }

      .preview-device-inner {
        transform-origin: calc($mobile-width / 2);
        height: $mobile-width;
        width: $mobile-height;
      }
    }
  }

  &.tablet {
    .preview__device {
      min-width: calc(#{$tablet-width} + #{$spacer} * 4);

      &::after {
        content: '#{$tablet-width} x #{$tablet-height}';
      }
    }

    .preview-device-outer {
      min-height: $tablet-height;
      width: $tablet-width;
      height: $tablet-height;
    }

    .rotate {
      min-width: calc(#{$tablet-height} + #{$spacer} * 4);

      &::after {
        content: '#{$tablet-height} x #{$tablet-width}';
      }

      .preview-device-inner {
        transform-origin: calc($tablet-width / 2);
        height: $tablet-width;
        width: $tablet-height;
      }
    }
  }

  &.desktop {
    .preview__device {
      min-width: calc(#{$desktop-width} + calc(#{$spacer} * 4));

      &::after {
        content: '#{$desktop-width} x #{$desktop-height}';
      }
    }

    .preview-device-outer {
      min-height: $desktop-height;
      width: $desktop-width;
      height: $desktop-height;
    }
  }
}