.mmui-tabs-section {
  // to get the style of blue bar under tab name correctly
  ul {
    margin: 0;

    li {
      padding: 0;
    }
  }

  .tab-pane {
    padding: 4rem;
    margin-bottom: 4rem;
    box-shadow: $mm-boxshadow;
  }
}

.mmui-tabs-simple {
  .tab-content {
    .tab-pane {
      padding: 4rem 2rem;
      box-shadow: none;
    }
  }
}

.nav-tabs {
  .nav-link {
    border: none;
  }
}

.mmui-tab-label.nav-item {
  margin: 0;
  text-transform: uppercase;
  text-align: center;
  //letter-spacing: 1.5px;   //note! dsp tab does not have this attribute

  a {
    color: $mm-neutral-gray-80 !important;
    text-decoration: none;
    display: block;
    border-bottom: 5px solid transparent;
    padding: 10px 15px; // TODO: the margin is from Zeplin, but may not be mobile friendly when there are many tabs

    &:hover {
      border: none;
      border-bottom: 5px solid $mm-neutral-gray-30;
    }

    // when the tab is selected
    &.active {
      font-weight: bold;
      color: $mm-neutral-black;
      border: none;
      border-bottom: 5px solid $mm-core-digital-blue-70;
    }
  }
}