.ClustersMenu {
  $spacing: $padding * 2;

  position: relative;
  text-align: center;
  background: $clusterMenuBackground;
  border-right: 1px solid $clusterMenuBorderColor;
  padding: $spacing 0;
  min-width: 75px;

  .is-mac &:before {
    content: "";
    height: 20px; // extra spacing for mac-os "traffic-light" buttons
  }

  .clusters {
    @include hidden-scrollbar;
    padding: 0 $spacing; // extra spacing for cluster-icon's badge
    margin-bottom: $margin;

    .ClusterIcon {
      margin-bottom: $margin * 1.5;
    }

    &:empty {
      display: none;
    }
  }

  > .WorkspaceMenu {
    position: relative;
    margin-bottom: $margin;

    .Icon {
      margin-bottom: $margin * 1.5;
      border-radius: $radius;
      padding: $padding / 3;
      color: var(--textColorPrimary);
      background: unset;
      cursor: pointer;

      &.active {
        opacity: 1;
      }

      &:hover {
        box-shadow: none;
        color: var(--textColorAccent);
        background-color: unset;
      }
    }
  }

  > .extensions {
    &:not(:empty) {
      padding-top: $spacing;
    }

    .Icon {
      --size: 40px;
    }
  }
}