.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(--ginBorderSmall);
}

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

.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: .75rem;
  margin: 0;
  background-color: var(--colorGinTextLight);
  -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(--ginEasing);
}

[dir="ltr"] .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-trigger::after {
  right: .5rem;
}

[dir="rtl"] .toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-trigger::after {
  left: .5rem;
}

.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options {
  padding: .5rem;
  margin: 0;
  background-color: var(--colorGinLayer3Background);
  border-bottom: 0 none;
  border-radius: var(--ginBorderMedium);
  box-shadow: var(--ginShadowLevel2);
}

.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-device {
  color: var(--colorGinPrimary);
  width: 100%;
  padding: .625rem 1rem;
  border-radius: var(--ginBorderSmall);
}

.toolbar .toolbar-tab-responsive-preview.toolbar-tab .responsive-preview-options .responsive-preview-device.responsive-preview-device:hover {
  color: var(--colorGinButtonText);
  background-color: var(--colorGinPrimary);
}

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

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

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

.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);
}