@use "00-base/configure" as *;

.ma__tabs {
  overflow: auto;
  display: flex;

  &-item {
    background: var(--mf-c-bg-subtle);
    border: none;

    @media ($bp-small-max) {
      display: flex;
        flex-wrap: nowrap;
        white-space:nowrap;
    }

    padding: 1.5rem 1.5rem 0.8rem 1.5rem;
    font-size: $fonts-medium;
    color: inherit;
    border-bottom: 5px solid transparent;
    cursor: pointer;
    font-weight: normal;

    &:hover {
      border-bottom: 5px solid;
      border-color: var(--mf-c-link);
    }

    &.is-selected {
      border-bottom: 5px solid;
      padding-left: 1.4rem;
      padding-right: 1.4rem;
      color: var(--mf-c-primary);
      font-weight: $fonts-bold;
    }
  }
}