@charset "UTF-8";
/*
 * HORIZONTAL BAR
 */

// The .bar element is a horizontal stripe that can contain any other item.
// Use it for vertical alignment and horizontal distribution, such as navigation bars or inline forms.

@barBackgroundColor: @backgroundColor;

.bar {
  align-items: stretch;
  display: flex;
  min-height: 35px;
  position: relative;
  text-align: center;
  justify-content: space-between;
}

.barGroup {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  .btn:not(:last-child),
  .bar-item:not(:last-child),
  .bar-link:not(:last-child) {margin-right: 10px;}
}

.barGroup-vLeft {justify-content: flex-start;}
.barGroup-vCenter {justify-content: center; margin-left: auto; margin-right: auto;}
.barGroup-vRight {justify-content: flex-end; margin-left: auto;}

.barGroup-vNav {
  align-items: stretch;
  & .bar-item {
    padding: 10px;
    display:flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
  }
  &.barGroup .bar-link {
    justify-content: center;
    padding: 10px;
    margin-right:0;
    border-bottom: 1px solid @mainColor;
  }
  & .bar-link:hover {
    background-color: darken(@barBackgroundColor,2%);
    border-bottom: 1px solid lighten(@mainColor,10%);
  }
}

.bar-link {
  align-items: center;
  display: flex;
}


// => Bar Media Queries

.media-mixin(@break) when (@break = @breakSmall) {
}

.media-mixin(@break) when (@break = @breakMedium) {
  .bar {display:block; text-align:left;}
  .barGroup {
    display: block;
    &:not(:last-child) {
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
    }
    .btn:not(:last-child),
    .bar-item:not(:last-child),
    .bar-link:not(:last-child) {margin-right: 0; margin-bottom: 10px;}
    &.barGroup-vNav .bar-link {margin-bottom: 0;}
    .btn,
    .bar-item,
    .bar-link {display: block; width: 100%;}
  }
}

.media-mixin(@break) when (@break = @breakLarge) {
}

.media-mixin(@break) when (@break = @break2x) {
}

.media-mixin(@break) when (@break = @breakPrint) {
}