@import 'topbar';

@include exports('top-bar-user') {
  .sign-out {
    margin-right: 0;
  }

  .top-bar--user {
    background-color: $cui-white-100;
    box-shadow: 0px -2px 2px 2px #858688;

    @media #{$medium-up} {
      @include vr-spacing(pt, 1);
    }

    .top-bar {
      height: $top-bar-mobile-height;
      overflow: visible;
      box-shadow: none;

      @media #{$medium-up} {
        height: $top-bar-user-height;
      }

      .app-logo {
        @include vr-spacing(mt, -1);

        .icon {
          display: flex;
          font-size: rem-calc(26);
          color: $cui-gray-30;
          align-items: center;

          @include vr-spacing(pr, 1);
        }

        img {
          width: 48px;
          max-width: none;
          margin: 0 auto;
        }
      }

      .app-name {
        display: flex;
        // @extend %h4;
        font-family: $brand-font-extra-light;
        color: $cui-gray-90;
        align-items: center;

        @media #{$small-only} {
          display: none;
        }
      }

      .title-area {
        display: flex;
        align-items: center;
      }
    }
  }
}