.mapbender-element-tab-navigator {
  padding: 0;
  position: relative;

  > .ui-tabs-nav {
    > li {
      list-style: none;
      float: left;
      position: relative;
      margin-bottom: 1px;
      border-bottom: 0 !important;
      padding: 0;
      white-space: normal;
      &.ui-state-active > a {
        background-color: $buttonFirstActiveColor;
        z-index: 1;
        position: relative;
      }
      @extend .buttonCore;
      font-size: $buttonFontSize;
      > a {
        @extend .buttonColors;
        padding: ($space/4) ($space/2);
        // undo Bootstrap .nav-tabs>li>a border rules
        // @todo: if we don't want Bootstrap rules, do not add Bootstrap classes
        border: none;
        border-radius: 0;
        // undo Bootstrap .nav-tabs>li>a margin-right rule
        // @todo: if we don't want Bootstrap rules, do not add Bootstrap classes
        margin-right: 0;
        // undo Bootstrap focus outline rule
        // @todo: if we don't want Bootstrap rules, do not add Bootstrap classes
        &:focus {
          outline: none;
        }
      }
    }
  }

  .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 1em 1.4em;
    background: none;
  }
  .ui-tabs-hide {
    display: none !important;
  }

  .tab-content {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
  }
}
