/**
 * @file
 * Responsive preview icon styling.
 */
.toolbar-tab-responsive-preview .responsive-preview-icon:before,
.responsive-preview .responsive-preview-icon:before {
  background-attachment: scroll;
  background-color: transparent;
  background-image: url("/modules/contrib/responsive_preview/images/responsive-preview-icons.png");
  background-repeat: no-repeat;
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
}
.toolbar .toolbar-bar .toolbar-tab-responsive-preview .responsive-preview-icon:before {
  width: 13px;
}
.toolbar-tab-responsive-preview button.responsive-preview-icon,
.responsive-preview button.responsive-preview-icon {
  background-color: transparent;
  border: 0;
  font-size: 1em;
}

/* Toolbar icon. */
.toolbar .toolbar-bar .responsive-preview-icon.responsive-preview-icon-responsive-preview {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  width: 5em;
}
.toolbar-tab-responsive-preview .responsive-preview-icon.responsive-preview-icon-responsive-preview:before {
  background-position: center top;
}
.toolbar-tab-responsive-preview.open .responsive-preview-icon-responsive-preview:before,
.toolbar-tab-responsive-preview .responsive-preview-icon-responsive-preview.active:before,
.toolbar-tab-responsive-preview .responsive-preview-icon-responsive-preview:hover:before {
  background-position: center -22px;
}
.toolbar .toolbar-bar .toolbar-tab-responsive-preview .responsive-preview-icon-responsive-preview:before {
  left: 1em; /* LTR */
  height: 22px;
  top: 0.6667em;
}
[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab-responsive-preview .responsive-preview-icon-responsive-preview:before {
  left: auto;
  right: 6px;
}
.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-icon-active {
  padding: 0.5em 1.3333em;
  text-indent: 0;
  -moz-transition: padding 0.25s;
  -webkit-transition: padding 0.25s;
  transition: padding 0.25s;
}
.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-icon-active.active {
  padding-left: 2.25em; /* LTR */
}
[dir="rtl"] .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-icon-active.active {
  padding-left: 1.333em;
  padding-right: 2.25em;
}
.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-icon-active:before {
  background-position: -999px -999px;
  height: 14px;
  left: 0.667em; /* LTR */
  top: 0.5em;
  width: 13px;
}
[dir="rtl"] .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-icon-active:before {
  left: auto;
  right: 0.667em;
}
.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-icon-active.active:before {
  background-position: center -116px;
}


/**
 * Responsive preview controls icons.
 */
.responsive-preview-control.responsive-preview-icon:before {
  height: 12px;
  width: 12px;
  top: 12px;
}
.responsive-preview-icon-close:before {
  background-position: left -44px;
  right: 9px; /* LTR */
}
[dir="rtl"] .responsive-preview-icon-close:before {
  left: 9px;
  right: auto;
}
.responsive-preview-icon-close:active:before,
.responsive-preview-icon-close.active:before,
.responsive-preview-icon-close:hover:before {
  background-position: left -56px;
}
.responsive-preview-icon-orientation:before {
  background-position: left -92px; /* LTR */
  left: 9px; /* LTR */
}
[dir="rtl"] .responsive-preview-icon-orientation:before {
  background-position: left -155px;
  left: auto;
  right: 9px;
}
.responsive-preview-icon-orientation:hover:before {
  background-position: left -104px; /* LTR */
}
[dir="rtl"] .responsive-preview-icon-orientation:hover:before {
  background-position: left -167px;
}
.responsive-preview-icon-orientation.rotated:before {
  background-position: left -68px; /* LTR */
}
[dir="rtl"] .responsive-preview-icon-orientation.rotated:before {
  background-position: left -131px;
}
.responsive-preview-icon-orientation.rotated:hover:before {
  background-position: left -80px; /* LTR */
}
[dir="rtl"] .responsive-preview-icon-orientation.rotated:hover:before {
  background-position: left -143px;
}