.ui-tabbed-nav {
  display: flex;

  background-color: ui-color(blue);

  &__sticky {
    position: fixed;
    top: 0;

    width: 100%;

    border-bottom: 1px solid ui-color(paper-darkest);
  }

  &__group {
    display: flex;
    flex: 1;
    justify-content: space-evenly;
    height: 100%;

    @include ui-from($ui-bp-tablet) {
      // set fixed spacing for tablet and desktop
      display: block;
    }
  }

  &__group--right {
    flex: 0.2;
  }

  &__group--left {
    flex: 0.2;
  }

  &__item {
    color: ui-color(natural) !important;
    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }

    // set fixed spacing for tablet-desktop
    @include ui-from($ui-bp-tablet) {
      margin: 0 10px;
      padding: 0 10px;
    }
  }

  &__item-active {
    border-bottom: 4px solid ui-color(coral);
  }
}