@import '../styles/_dimensions';

.vui-header{
  display: flex;
  padding:28px 0 0 0;
  margin: 0 auto 0;
  box-sizing: border-box;
  max-width: $dim-header-width;
  font-size: 16px;
	height: 103px;

	&-first{
		flex: 0 1 auto;
	}
	&-app{
		display: flex;
		align-items: flex-start;
		justify-content: flex-end;
		padding-top: 8px;
		padding-left: 30px;
		margin-left: auto;
		text-align: right;
		overflow: hidden;
		> div{
			font-size: 22px;
			font-family: 'Broader View', 'Avenir Next', Verdana, Geneva, sans-serif;
			border-right: 2px solid #ccc;
			padding-right: 20px;
			margin-right: 20px;
			text-transform: uppercase;
			line-height: 1;
			font-weight: bold;
		}
	}
	&-last{
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
		padding-top: 8px;
		flex: 1 1 auto;
		min-width: 46px;
		> a{
			text-decoration: none;
			color: inherit;
		}
	}

	&[data-padleft="true"]{
		padding-left: 30px;
	}
	&[data-padright="true"]{
		padding-right: 30px;
	}

	&[data-hasappname="true"]{
		.vui-header-last{
			flex: 0 1 auto;
		}
	}

	@include media-break-down(md){
		padding-bottom: 0;
		flex-wrap: wrap;
		&[data-padleft="true"]{
			padding-left: 20px;
		}
		&[data-padright="true"]{
			padding-right: 20px;
		}
		&-app{
			display: none;
		}
		&-last{
			margin-left: auto;
		}
	}
}