.announcementBar {
	position: relative;
	height: auto;
	background-color: $secondary-blue;
	color: $white;

	.container {
		position: relative;
	}

	.announcementBarContent {
		padding: 7px 15px 6px;
		width: 100%;
		text-align: center;
		font-family: $trevas-font-book;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.25px;

		@include mobile {
			line-height: 1.3;
			font-size: 13px;
		}

		&.announcementBarCloseable {
			padding-right: 56px;
		}

		.text {
			margin: 0;
			display: inline-block;

			@include mobile {
				display: block;
			}
		}

		.btn {
			display: inline-block;
			margin-left: 15px;
			padding: 5px 23px 4px;
			vertical-align: middle;
			border: 1px solid $white;
			border-radius: 3px;
			font-family: $trevas-font-book;
			font-size: 12.5px;
			font-weight: 700;
			letter-spacing: 0.5px;
			text-decoration: none;
			color: $white;
			transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;

			@include mobile {
				margin-top: 10px;
			}

			&:hover {
				background-color: $white;
				color: $secondary-blue;
			}
		}
	}

	.announcementBarClose {
		display: flex;
		align-items: center;
		position: absolute;
		color: #fff;
		top: 0;
		right: 0;
		padding: 0 14px;
		height: 100%;
		border: none;
		background: none;
		cursor: pointer;
	}
}