.responsive-preview {
  z-index: 502;
}

.responsive-preview-item-list {
  top: 36px !important;
}

.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-trigger {
  width: 4em;
  background: none;
  border-radius: var(--gin-border-s);
}

.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-trigger:hover::before {
  background-color: var(--gin-color-title);
}

.gin--classic-toolbar .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-trigger:hover::before {
  background-color: #fff;
}

.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-trigger::after {
  width: 1rem;
  height: 1rem;
  top: var(--gin-spacing-s);
  margin: 0;
  background-color: var(--gin-color-text-light);
  -webkit-mask-image: url("../../media/sprite.svg#drop-view");
          mask-image: url("../../media/sprite.svg#drop-view");
  -webkit-mask-size: .75rem .75rem;
          mask-size: .75rem .75rem;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  box-sizing: border-box;
  transition: transform .2s var(--gin-easing);
}

[dir="ltr"] .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-trigger::after {
  right: var(--gin-spacing-xs);
}

[dir="rtl"] .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-trigger::after {
  left: var(--gin-spacing-xs);
}

.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options {
  padding: var(--gin-spacing-xs);
  margin: 0;
  background-color: var(--gin-bg-layer3);
  border-bottom: 0 none;
  border-radius: var(--gin-border-l);
  box-shadow: var(--gin-shadow-l2);
}

.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-device {
  color: var(--gin-color-primary);
  width: 100%;
  padding: .625rem var(--gin-spacing-m);
  border-radius: var(--gin-border-s);
}

.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-device:hover {
  color: var(--gin-color-button-text);
  background-color: var(--gin-color-primary);
}

.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-configure {
  color: var(--gin-color-text-light);
  text-decoration: none;
}

.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-configure:hover {
  color: var(--gin-color-primary);
}

.toolbar .toolbar-tab-responsive-preview.toolbar-tab.open, .toolbar .toolbar-tab-responsive-preview.toolbar-tab.open::before {
  background-color: var(--gin-bg-layer3);
}

.gin--classic-toolbar .toolbar .toolbar-tab-responsive-preview.toolbar-tab.open .responsive-preview-trigger::before {
  background-color: #111;
}

[dir="ltr"] .toolbar .toolbar-tab-responsive-preview.toolbar-tab.open .responsive-preview-trigger::after {
  transform: rotate(180deg);
}

[dir="rtl"] .toolbar .toolbar-tab-responsive-preview.toolbar-tab.open .responsive-preview-trigger::after {
  transform: rotate(-180deg);
}