@import '../../../theme';

.header {
	background: $aeap-color-white;
	border-bottom: 0.1rem solid $aeap-color-blue;
	box-shadow: 0 0.3rem 0.3rem $aeap-shadow;
	height: $header-height;
	left: 0;
	padding: 0 $layout-content-gutter-header;
	top: 0;
	z-index: $zindex-navbar;

	.logo {
		@include transition(all 0.2s ease);

		@include screen-laptop-only {
			width: $side-nav-width-laptop;
		}

		@include screen-tablet {
			display: none;
		}

		border-right: 0.1rem solid $aeap-border-dark;
		width: $logo-width;
	}
  .nav-wrap {
		flex: 1;

		.nav-left,
		.nav-right {
			list-style-type: none;
		}

		.nav-left {
			.desktop-toggle {
				.v-center-img {
					vertical-align: text-top;
				}
			}

			.header-title {
				color: $aeap-color-mostly-black;
			}
		}

		.nav-right {
			.circle {
				background: $aeap-color-mostly-black;
				border-radius: 50%;
				color: $aeap-color-white;
				display: flex;
				font-weight: bold;
				height: 3.2rem;
				justify-content: center;
				line-height: 1.8rem;
				text-align: center;
				width: 3.2rem;
				span {
					align-self: center;
				}
			}
		}
	}
  &.new-header {
    color: $aeap-color-white;
    background: $aeap-color-primary;
	border-bottom: 0.1rem solid $aeap-color-blue;
    .icon-color-toolbar-active {
      color: $aeap-color-white;
    }
    .nav-wrap {
		.nav-left {
			.header-title {
				color:  $aeap-color-white;
			}
		}
      .nav-right {
        .circle {
          background: $aeap-color-white;
          color: $aeap-color-primary;
          .abb {
            position: relative;
            top: 1px;
          }
        }
      }
    }
  }
}