.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;
  }
  */

}