@import 'topcoder/tc-includes';

$menu-bar-item-text-color: #737380;

.MenuBar {
  display: flex;
  font-family: 'Roboto', Arial;

  &.horizontal {
    flex-direction: row;
    justify-content: center;

    li {
      display: flex;
      justify-content: center;
      margin: 0px 15px;

      a {
        padding-bottom: 6px;
      }
    }
  }

  &.vertical {
    flex-direction: column;

    li {
      padding: 10px 15px;
    }
  }

  li {
    display: flex;

    &.selected {
      border-bottom: 2px solid $primary-light;

      a {
        color: $black;
      }
    }

    &.mobile {
      width: 30px;
    }

    a {
      text-transform: uppercase;
      font-size: 12px;
      line-height: 14px;
      color: $menu-bar-item-text-color;
    }
  }
}