.ias-app-bar {
  align-items: center;
  background-color: $app-bar-bg;
  color: $app-bar-text-color;
  display: flex;
  flex-flow: row nowrap;
  font-size: $app-bar-font-size;
  min-height: $app-bar-height-small;
  padding-right: $app-bar-padding;
  overflow: hidden;

  > .ias-avatar {
    border-radius: 0;

    > img {
      display: block;
      max-height: $app-bar-height-small;

      &.micro-logo {
        max-height: $app-bar-height-microfocus;
      }

    }
  }

  > .ias-heading {
    /* Add height and line-height for align-items bug in IE11 */
    font-size: $app-bar-heading-font-size;
    height: $app-bar-height-small;
    line-height: $app-bar-height-small;
    margin-left: $app-bar-padding;
  }

  > span:not(.ias-fill) {
    @include single-line;
    flex-shrink: 10;
    margin-left: $app-bar-text-spacing;

    &:not(:last-child) {
      margin-right: $app-bar-text-button-spacing;
    }
  }

  > button,
  > .ias-button {
    background-color: transparent;
    border: none;
    color: inherit;
    flex-shrink: 0;
    font-size: inherit;
    margin-left: $app-bar-button-spacing;

    &.ias-icon-button {
      color: $app-bar-text-color;
      padding: $app-bar-button-padding;

      > .ias-icon,
      > .svg-icon {
        font-size: $app-bar-icon-size;
      }
    }

    &:not([disabled]):not(.ias-disabled) {
      &:focus,
      &:hover {
        background-color: $app-bar-action-color;
        color: inherit;
      }
    }

    &:not(.ias-icon-button) {
      > .ias-icon,
      > .svg-icon {
        background-color: transparent;
      }
    }
  }
}

[dir="rtl"] {
  .ias-app-bar {
    background-color: $app-bar-bg;
    padding-left: $app-bar-padding;
    padding-right: 0;

    > .ias-heading {
      margin-left: 0;
      margin-right: $app-bar-padding;
    }

    > span:not(.ias-fill) {
      @include single-line;
      margin-left: 0;
      margin-right: $app-bar-text-spacing;

      &:not(:last-child) {
        margin-left: $app-bar-text-button-spacing;
      }
    }

    > button,
    > .ias-button {
      margin-left: 0;
      margin-right: $app-bar-button-spacing;
    }
  }
}

@media (min-width: $medium-display) {
  .ias-app-bar {
    padding-right: $app-bar-padding;

    > .ias-avatar {
      > img {
        max-height: $app-bar-height-large;
      }
    }

    > .ias-heading {
      margin-left: $app-bar-padding-normal;
    }
  }

  [dir="rtl"] {
    .ias-app-bar {
      padding-left: $app-bar-padding;
      padding-right: 0;

      > .ias-heading {
        margin-left: 0;
        margin-right: $app-bar-padding-normal;
      }
    }
  }
}