.mb-element-basesourceswitcher {
  .basesourcegroup, .basesourcesetswitch {
    cursor: pointer;
  }
  line-height: 1.5; // @todo: undo global fixed-pixel-unit line height!
  .state-check {
    margin-right: 0.5em;
  }

  .toolBarItem & {
    // Reset toolbar text alignment (vs .itemsRight / .itemsCenter)
    text-align: left;
    position: relative;
    z-index: 1;
    .state-check {
      display: none;
    }
    .basesourcegroup, .basesourcesetswitch {
      padding: 0 5px;
      background-color: #b5b5b5;
      &:hover, &[data-state="active"]{
        color:$firstColor;
        background-color: $contentColor;
      }
      @include transition(all .2s ease-in-out);
    }
    .basesourcegroup, > .basesourcesetswitch {
      display: inline-block;
      border: solid 1px $thirdColor;
      border-right-width: 0;
      &:last-child {
        border-right-width: 1px;
      }
    }
    .basesourcegroup {
      position: relative;
    }
    .basesourcesubswitcher {
      display: none;
      position: absolute;
      right: 0;
    }
    .basesourcegroup:hover .basesourcesubswitcher {
      display: initial;
    }
    .basesourcegroup .basesourcesetswitch {
      border:solid 1px $thirdColor;
    }
  }
  .toolBar.top & {
    .basesourcegroup .basesourcesetswitch {
      border-bottom-width: 0;
      &:last-child {
        border-bottom-width: 1px;
        border-bottom-left-radius: $radius;
        border-bottom-right-radius: $radius;
      }
    }
    .basesourcegroup, > .basesourcesetswitch {
      &:first-child {
        border-top-left-radius: $radius;
      }
      &:last-child{
        border-top-right-radius: $radius;
      }
    }
  }
  .toolBar.bottom & {
    .basesourcesubswitcher {
      // Make the child list "drop up"
      bottom: 0;
      margin-bottom: calc(1.5em - 1px);   // =line height + one border
    }
  }
}
