@mixin cwui-tabs {
  @include foundation-tabs;
  
  .tabs-title:not(:first-child) > a {
    border-left: 1px solid $tab-content-border;
  }
  
  .tabs-title > a {
    text-decoration: none;
  
    &:hover {
      text-decoration: underline;
    }
  }
  
  .tabs-title.is-active > a {
    font-weight: bold;
    position: relative;
  
    &::after {
      @include css-triangle(10px, #efece5, down);
  
      bottom: -8px;
      left: 50%;
      margin-left: -8px;
      position: absolute;
    }
  
    &::before {
      background: $tab-background-active;
      bottom: -1px;
      content: "";
      height: 1px;
      left: 0;
      position: absolute;
      width: 100%;
    }
  }
  
  
  .tabs.vertical {
    .tabs-title > a {
      border-left: 0;
      border-bottom: 1px solid $tab-content-border;
    }
  
    .tabs-title.is-active > a {
      &::after {
        @include css-triangle(10px, #efece5, right);
  
        left: initial;
        right: -8px;
        top: 50%;
        margin-top: -8px;
      }
  
      &::before {
        bottom: initial;
        height: 100%;
        left: initial;
        right: -1px;
        top: 0;
        width: 1px;
      }
    }
  }
}