@use '../system' as mbi;

@include mbi.core(tabs) {
  --color: var(--mbi-dark);
  --font-weight: normal;

  display: block;
  position: relative;
  white-space: nowrap;
  list-style: none;
  margin: 0px 0px 20px 0px;
  padding: 0px !important;
  // border-bottom: 1px solid var(--mbi-default) !important;
  overflow-y: hidden;
  overflow-x: auto;

  &::after {
    display: block;
    position: absolute;
    left: 0px; right: 0px;
    bottom: 0px;
    height: 1px;
    background-color: var(--mbi-default) !important;
    content: "";
  }

  > li {
    display: table-cell;
    position: relative;
    white-space: nowrap;
    // float: left;
    margin: 0px;
    z-index: 5;

    > a {
      display: block;
      padding: 20px;
      color: var(--color) !important;
      font-weight: var(--font-weight) !important;
      text-decoration: none !important;
    }

    &.active, &:hover {
      --color: var(--mbi-primary);
    }

    &.active {
      // --font-weight: bold;

      &::after {
        display: block;
        position: absolute;
        left: 0px; right: 0px;
        bottom: -1px;
        height: 3px;
        background-color: var(--mbi-primary) !important;
        content: "";
      }
    }
  }
}