// Foundation for Sites
// https://get.foundation
// Licensed under MIT Open Source

////
/// @group title-bar
////

/// Background color of a title bar.
/// @type Color
$titlebar-background: $black !default;

/// Color of text inside a title bar.
/// @type Color
$titlebar-color: $white !default;

/// Padding inside a title bar.
/// @type Length
$titlebar-padding: 0.5rem !default;

/// Font weight of text inside a title bar.
/// @type Weight
$titlebar-text-font-weight: bold !default;

/// Color of menu icons inside a title bar.
/// @type Color
$titlebar-icon-color: $white !default;

/// Color of menu icons inside a title bar on hover.
/// @type Color
$titlebar-icon-color-hover: $medium-gray !default;

/// Spacing between the menu icon and text inside a title bar.
/// @type Length
$titlebar-icon-spacing: 0.25rem !default;

@mixin foundation-title-bar {
  .title-bar {
    padding: $titlebar-padding;
    background: $titlebar-background;
    color: $titlebar-color;

    @if $global-flexbox {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    @else {
      @include clearfix;
    }

    .menu-icon {
      margin-#{$global-left}: $titlebar-icon-spacing;
      margin-#{$global-right}: $titlebar-icon-spacing;
    }
  }

  @if $global-flexbox {
    .title-bar-left,
    .title-bar-right {
      flex: 1 1 0px; // sass-lint:disable-line zero-unit
    }

    .title-bar-right {
      text-align: right;
    }
  }
  @else {
    .title-bar-left {
      float: left;
    }

    .title-bar-right {
      float: right;
      text-align: right;
    }
  }

  .title-bar-title {
    display: inline-block;
    vertical-align: middle;
    font-weight: $titlebar-text-font-weight;
  }
}
