$toolbar-tools-height: 100%;
$toolbar-height: $pitch;
$toolbar-medium-tall-height: 88px !default;
$toolbar-tall-height: ($toolbar-height * 2);
$toolbar-indent-margin: $pitch;
$toolbar-padding: $mg;
@import 'extends';

// According to specs, there's no case where toolbars have no padding
// We overule angular-material way of implenting this by defining padding toolbars
// instead of toolbar-tools to prevent padding addition
// INFO: because we make intensive use of border-box box sizing model, horizontal paddings
// must be declare in containers with sg-padded
md-toolbar {
  padding: $toolbar-padding 0;
  box-shadow: none;
  font-size: initial;
}

.md-toolbar-tools {
  padding: 0 initial;
}

// angular-material is overspecifying so we are
.md-toolbar-tools[layout-align="start start"] {
  align-items: flex-start;
}

.md-toolbar-tools.md-toolbar-tools-top {
  align-items: flex-start;
}

.md-toolbar-tools.md-toolbar-tools-bottom {
  height: (5 * $line);
  max-height: (5 * $line);
}

header {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  display: flex;
}
hgroup {
  align-items: center;
  flex: 1 1 auto;
  &h3 {
    margin-bottom: 0;
  }
}
.toolbar-main .md-button {
  color: inherit;
  font-size: sg-size(headline);
}

.sg-toolbar-group {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  &-1 {
    order: 1;
    max-width: $listView-width;
  }
  &-2 {
    order: 2;
  }
  &-3,
  &-last {
    order: 3;
  }
}