.bar {
  background-color: $barBackground;
  border-style: solid;
  border-width: 0;

  &.bar-header {
    border-bottom-width: 1px;
  }
  &.bar-footer {
    border-top-width: 1px;
  }

  &.bar-default {
    background-color: $barDefaultBackground;
    border-color: $barDefaultBorderColor;
    color: $darkColor;
    .tab-item a {
      color: $darkColor;
    }
  }

  &.bar-secondary {
    background-color: $barSecondaryBackground;
    border-color: $barSecondaryBorderColor;
    color: $darkColor;
    .tab-item a {
      color: $darkColor;
    }
  }
  &.bar-primary {
    background-color: $barPrimaryBackground;
    border-color: $barPrimaryBorderColor;
    color: $lightColor;
    .tab-item a {
      color: $lightColor;
    }
  }
  &.bar-info {
    background-color: $barInfoBackground;
    border-color: $barInfoBorderColor;
    color: $lightColor;
    .tab-item a {
      color: $lightColor;
    }
  }
  &.bar-success {
    background-color: $barSuccessBackground;
    border-color: $barSuccessBorderColor;
    color: $lightColor;
    .tab-item a {
      color: $lightColor;
    }
  }
  &.bar-warning {
    background-color: $barWarningBackground;
    border-color: $barWarningBorderColor;
    color: $lightColor;
    .tab-item a {
      color: $lightColor;
    }
  }
  &.bar-danger {
    background-color: $barDangerBackground;
    border-color: $barDangerBorderColor;
    color: $lightColor;

    .tab-item a {
      color: $lightColor;
    }
  }
  &.bar-dark {
    background-color: $barDarkBackground;
    border-color: $barDarkBorderColor;
    color: $lightColor;

    .tab-item a {
      color: $lightColor;
    }
  }

  //
  //Disabled temporarily because it's annoying for testing.
  //@media screen and (orientation : landscape) {
  //padding: $barPaddingLandscape;
  //}
}

// Default styles for buttons inside of styled bars

.bar-default {
  .button {
    @include button-style($buttonDefaultBackground, $buttonDefaultBorder, $darkColor);
  }
}

.bar-secondary {
  .button {
    @include button-style($buttonSecondaryBackground, $buttonSecondaryBorder, $darkColor);
  }
}

.bar-primary {
  .button {
    @include button-style($buttonPrimaryBackground, $buttonPrimaryBorder, $lightColor);
  }
}
.bar-info {
  .button {
    @include button-style($buttonInfoBackground, $buttonInfoBorder, $lightColor);
  }
}
.bar-success {
  .button {
    @include button-style($buttonSuccessBackground, $buttonSuccessBorder, $lightColor);
  }
}
.bar-warning {
  .button {
    @include button-style($buttonWarningBackground, $buttonWarningBorder, $lightColor);
  }
}
.bar-danger {
  .button {
    @include button-style($buttonDangerBackground, $buttonDangerBorder, $lightColor);
  }
}
.bar-dark {
  // A default style for buttons
  .button {
    @include button-style($buttonDarkBackground, $buttonDarkBorder, $lightColor);
  }
}