// Standard/Desktop Heights
@toolbar-tools-height: 64px;
@toolbar-height: 64px;
@toolbar-medium-tall-height: 88px;
@toolbar-tall-height: 128px;

// Mobile portrait heights
@toolbar-tools-height-mobile-portrait: 56px;
@toolbar-height-mobile-portrait: 56px;

// Mobile landscape heights
@toolbar-tools-height-mobile-landscape: 48px;
@toolbar-height-mobile-landscape: 48px;


@toolbar-indent-margin: 64px;
@toolbar-padding: 16px;

@icon-button-margin-offset: -0.800 * @font-size;

md-toolbar {
  box-sizing: border-box;
  .display-flex;
  .flex-direction(column);

  position: relative;
  z-index: 2;

  font-size: rem(2.0);
  min-height: @baseline-grid * 8;
  width: 100%;

  transition-duration: @swift-ease-in-out-duration;
  transition-timing-function: @swift-ease-in-out-timing-function;
  transition-property: background-color, fill, color;

  &.md-whiteframe-z1-add, &.md-whiteframe-z1-remove {
	transition: box-shadow @swift-ease-in-out-duration linear;
  }

  md-toolbar-filler {
	width: 9 * @baseline-grid;
  }

  *,
  *:before,
  *:after {
	box-sizing: border-box;
  }

  // By default @ngAnimate looks for transition durations on the element, when using ng-hide, ng-if, ng-show.
  // The toolbar has a transition duration applied, which means, that @ngAnimate delays the hide process.
  // To avoid this, we need to reset the transition, when @ngAnimate looks for the duration.
  &.ng-animate {
	transition: none;
  }

  &.md-tall {
	height: @toolbar-tall-height;
	min-height: @toolbar-tall-height;
	max-height: @toolbar-tall-height;
  }

  &.md-medium-tall {
	height: @toolbar-medium-tall-height;
	min-height: @toolbar-medium-tall-height;
	max-height: @toolbar-medium-tall-height;

	.md-toolbar-tools {
	  height: 48px;
	  min-height: 48px;
	  max-height: 48px;
	}
  }

  ~ md-content {
	> md-list {
	  padding: 0;

	  md-list-item:last-child {
		md-divider {
		  display: none;
		}
	  }
	}
  }
}

.md-toolbar-tools {
  font-size: @title-font-size-base;
  letter-spacing: 0.005em;
  box-sizing: border-box;
  font-weight: 400;
  display: flex;
  align-items: center;
  flex-direction: row;

  width: 100%;
  height: @toolbar-tools-height;
  max-height: @toolbar-tools-height;
  padding: 0 @toolbar-padding;
  margin: 0;

  h1, h2, h3 {
	font-size: inherit;
	font-weight: inherit;
	margin: inherit;
  }

  a {
	color: inherit;
	text-decoration: none;
  }
  .fill-height {
	display: flex;
	align-items: center;
  }
  .md-button {
	margin-top: 0;
	margin-bottom: 0;

	&, &.md-icon-button md-icon {
	  transition-duration: @swift-ease-in-out-duration;
	  transition-timing-function: @swift-ease-in-out-timing-function;
	  transition-property: background-color, fill, color;

	  // Normally .md-button is already resetting the transition, when @ngAnimate looks for the duration,
	  // but in this case, the selector has a higher specificity than the `reset selector`, which means, that
	  // we need to reset the transition our self.
	  &.ng-animate {
		transition: none;
	  }
	}
  }

  @media screen and (-ms-high-contrast: active) {
	border-bottom: 1px solid #fff;
  }
}

// Handle mobile portrait
@media (min-width: 0) and (max-width: @layout-breakpoint-sm - 1) and (orientation: portrait) {
  md-toolbar {
	min-height: @toolbar-height-mobile-portrait;
  }

  .md-toolbar-tools {
	height: @toolbar-height-mobile-portrait;
	max-height: @toolbar-height-mobile-portrait;
  }
}

// Handle mobile landscape
@media (min-width: 0) and (max-width: @layout-breakpoint-sm - 1) and (orientation: landscape) {
  md-toolbar {
	min-height: @toolbar-height-mobile-landscape;
  }

  .md-toolbar-tools {
	height: @toolbar-height-mobile-landscape;
	max-height: @toolbar-height-mobile-landscape;
  }
}