/**
 * Toolbar
 * A basic navigation element, primary used for top level navigation
 */

$am-toolbar-base-font-size  : am-sp(14px) !default;
$am-toolbar-title-font-size : am-sp(20px) !default;
$am-toolbar-keyline-small   : am-unit(7) !default;
$am-toolbar-keyline-medium  : $am-toolbar-keyline-small + 8px !default;

@mixin am-toolbar {
  @include am-type-smooth;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: $am-toolbar-base-font-size;
  position: relative;
}

@mixin am-toolbar-primary {
  @include am-fill(primary);
  @include am-color(text-light);
}

@mixin am-toolbar-title {
  font-size: $am-toolbar-title-font-size;
  font-weight: $am-font-weight-medium;
  line-height: am-unit(2);
  padding: am-unit(2);
  width: 100%;
  text-align: left;

  @include am-min-breakpoint($am-breakpoint-medium) {
    width: auto;
  }
}

@mixin am-toolbar-list {
  margin: 0 0 0 am-unit(2);
  padding: 0;
  text-align: left;
}

@mixin am-toolbar-item {
  @include am-link-no-decoration;
  @include am-color(text);
  display: inline-block;
  font-weight: $am-font-weight-medium;
  line-height: am-unit(3);
  margin: 0;
}

@mixin am-toolbar-item-primary {
  @include am-link-no-decoration;
  @include am-color(text-light);
  display: block;
  line-height: am-unit(2);
  padding: am-unit(2) am-unit(1);
  text-align: center;

  &:hover,
  &:focus {
    @include am-color(accent);
  }
}

@mixin am-toolbar-item-primary-active {
  @include am-color(accent);
  font-weight: $am-font-weight-semi-bold;
}
