@import '@amar-ui-web/core/helpers';
@import '@amar-ui-web/color/scss';
@import '@amar-ui-web/spacing/scss';
@import '@amar-ui-web/typography/scss';

/// Generate bottom bar classes
///
@mixin amb-create-bottom-bar-classes() {
  .BottomBar {
    &-menu {
      display: flex;
      flex-direction: row;
      align-items: center;

      background-color: $white;

      // Reset default list style in case this is applied with ul tag.
      list-style: none;
    }

    &-menuItem {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-grow: 1;

      font-size: amb-font-size('xsmall');
      color: amb-color-theme('dark');

      > a {
        @include amb-typography-style('caption12');
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
        height: rem(56px);
        width: rem(90px);
        padding: amb-spacing('base') 0;

        color: inherit;
        text-decoration: none;
      }

      &:hover,
      &.is-active {
        color: amb-color-theme('primary');
        transition: all 250ms ease-in-out;
      }

      &.is-active {
        font-size: amb-font-size('small');
      }
    }
  }
}