$title-color: gray;
$border-color: #dee2e6;
$background-color: #fff;

@mixin tab {
  color: $title-color;
  border-style: solid;
}

@mixin tablistBorder($isVertical: false, $isRtl: false) {
  &::before {
    content: '';
    position: absolute;
    @if $isVertical {
      @if $isRtl {
        left: 0px;
        top: 0px;
        bottom: 0px;
        width: 1px;
        right: auto;
        height: auto;
      } @else {
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 1px;
        height: auto;
        left: auto;
      }
    } @else {
      left: 0px;
      right: 0px;
      bottom: 0px;
      height: 1px;
      width: auto;
    }
    background-color: $border-color;
  }
}

@mixin tabBorder($isVertical: false, $isRtl: false) {
  @if $isVertical {
    @if $isRtl {
      border-width: 0px 0px 0px 1px;
      margin: 0px 0px 0px -1px;
      border-top-right-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
    } @else {
      border-width: 0px 1px 0px 0px;
      margin: 0px -1px 0px 0px;
      border-top-left-radius: 0.25rem;
      border-bottom-left-radius: 0.25rem;
    }
  } @else {
    border-width: 0px 0px 1px 0px;
    margin: 0px 0px -1px 0px;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
  }

  border-color: transparent;
}

@mixin selectedTabBorder($isVertical: false, $isRtl: false) {
  border-width: 1px;

  @if $isVertical {
    @if $isRtl {
      border-color: $border-color $border-color $border-color $background-color;
    } @else {
      border-color: $border-color $background-color $border-color $border-color;
    }
  } @else {
    border-color: $border-color $border-color $background-color $border-color;
  }
}

@mixin _main {
  &.rc-dyn-tabs-tablist-view {
    @include tablistBorder;
    background-color: $background-color;
    border: none;
    .rc-dyn-tabs-title {
      @include tab;
      @include tabBorder;
      background-color: transparent;
      padding: 0.5rem 1rem;
      min-width: 100px;
      min-height: 31px;
    }
    .rc-dyn-tabs-tab {
      color: $title-color;
      background-color: transparent;
      &:hover {
        & > .rc-dyn-tabs-title {
          background-color: #eee;
          border-color: #eee #eee transparent;
        }
      }
    }
    .rc-dyn-tabs-selected {
      background-color: $background-color;
      .rc-dyn-tabs-title {
        @include selectedTabBorder;
        background-color: $background-color;
      }
    }
    .rc-dyn-tabs-showmorebutton svg path {
      fill: $title-color;
    }
  }
  &.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical {
    @include tablistBorder($isVertical: true);
    .rc-dyn-tabs-title {
      @include tabBorder($isVertical: true);
    }
    .rc-dyn-tabs-selected .rc-dyn-tabs-title {
      @include selectedTabBorder($isVertical: true);
    }
    &.rc-dyn-tabs-popper {
      padding: 5px;
      .rc-dyn-tabs-selected .rc-dyn-tabs-title {
        border-color: $border-color;
      }
    }
  }
  &.rc-dyn-tabs-tablist-view.rc-dyn-tabs-vertical.rc-dyn-tabs-rtl {
    @include tablistBorder($isVertical: true, $isRtl: true);
    .rc-dyn-tabs-tab {
      .rc-dyn-tabs-title {
        @include tabBorder($isVertical: true, $isRtl: true);
      }
    }
    .rc-dyn-tabs-selected .rc-dyn-tabs-title {
      @include selectedTabBorder($isVertical: true, $isRtl: true);
    }
    &.rc-dyn-tabs-popper {
      .rc-dyn-tabs-selected .rc-dyn-tabs-title {
        border-color: $border-color;
      }
    }
  }
}
@mixin main {
  .all-themes {
    @include _main();
  }
  .bootstrap {
    @include _main();
  }
}