.responsive-preview {
  z-index: 502;

  &-item-list {
    top: 36px !important;
  }
}

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

      // Hover
      &:hover::before {
        background-color: var(--gin-color-title);

        .gin--classic-toolbar & {
          background-color: #fff;
        }
      }

      // Icon
      &::after {
        width: 1rem;
        height: 1rem;
        top: var(--gin-spacing-s);
        right: var(--gin-spacing-xs);
        margin: 0;
        background-color: var(--gin-color-text-light);
        mask-image: icon('drop');
        mask-size: .75rem .75rem;
        mask-position: center center;
        mask-repeat: no-repeat;
        box-sizing: border-box;
        transition: transform .2s var(--gin-easing);
      }
    }

    // Menu style
    .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);

      // Device links
      .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);

        &:hover {
          color: var(--gin-color-button-text);
          background-color: var(--gin-color-primary);
        }
      }

      // Configuration link
      .responsive-preview-configure {
        color: var(--gin-color-text-light);
        text-decoration: none;

        &:hover {
          color: var(--gin-color-primary);
        }
      }
    }

    // Open menu item
    &.open {
      &, &::before {
        background-color: var(--gin-bg-layer3);
      }

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

      .responsive-preview-trigger::after {
        transform: rotate(180deg);
      }
    }
  }
}