// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group top-bar
////

/// Padding for the top bar.
/// @type Number
$topbar-padding: 0.5rem;

/// Bottom margin for the top bar.
/// @type Number
$topbar-margin: 1rem;

/// Background color for the top bar. This color also cascades to menus within the top bar.
/// @type Color
$topbar-background: #eee;

/// Color for links inside a top bar menu.
/// @type Color
$topbar-link-color: #fff;

/// Width of `<input>` elements inside the top bar.
/// @type Number
$topbar-input-width: 200px;

/// Adds styles for a top bar container.
@mixin top-bar-container {
  @include clearfix;
  padding: $topbar-padding;
  margin-bottom: $topbar-margin;

  &, ul {
    background-color: $topbar-background;
  }

  input {
    width: $topbar-input-width;
    margin-right: 1rem;
  }
}

@mixin foundation-top-bar {
  // Top bar container
  .top-bar {
    @include top-bar-container;
  }

  // Sub-sections
  // Stack on small screens
  @include breakpoint(medium) {
    .top-bar-left {
      float: left;
    }

    .top-bar-right {
      float: right
    }
  }
}

// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group top-bar
////

/// Padding for the top bar.
/// @type Number
$topbar-padding: 0.5rem;

/// Bottom margin for the top bar.
/// @type Number
$topbar-margin: 1rem;

/// Background color for the top bar. This color also cascades to menus within the top bar.
/// @type Color
$topbar-background: #eee;

/// Color for links inside a top bar menu.
/// @type Color
$topbar-link-color: #fff;

/// Width of `<input>` elements inside the top bar.
/// @type Number
$topbar-input-width: 200px;

/// Adds styles for a top bar container.
@mixin top-bar-container {
  @include clearfix;
  padding: $topbar-padding;
  margin-bottom: $topbar-margin;

  &, ul {
    background-color: $topbar-background;
  }

  input {
    width: $topbar-input-width;
    margin-#{$global-right}: 1rem;
  }
}

@mixin foundation-top-bar {
  // Top bar container
  .top-bar {
    @include top-bar-container;
  }

  // Sub-sections
  // Stack on small screens
  @include breakpoint(medium) {
    .top-bar-left {
      float: left;
    }

    .top-bar-right {
      float: right
    }
  }
}

Add RTL support to top bar
Add RTL support to top bar
