.bubble-wrap {
	margin: 0 auto 1.5rem;
	max-width: 600px;
	position: relative;
}

.bubble {
	background: white;
	border: 2px solid black;
	border-radius: 5px;
	box-shadow: 0 0 5px 1px rgba(black, 0.15);
	box-sizing: border-box;
	display: block;
	padding: 1.5rem 1rem 1rem;
	position: relative;
	text-align: left;
	top: 0;
	width: 100%;
	p {
		font-size: 1.2rem;
		line-height: 1.4;
		&:first-child {
			margin-top: 0;
			padding-top: 0;
		}
		&:last-child {
			margin-bottom: 0;
			padding-bottom: 0;
		}
	}
	.close {
		position: absolute;
		right: 0.25rem;
		text-align: right;
		top: 0.25rem;
		.md-icon {
			cursor: pointer;
		}
		& + p {
			margin-top: 0;
			padding-top: 0;
		}
	}
	&:before {
		border-left: 15px solid black;
		border-right: 15px solid transparent;
		border-top: 15px solid black;
		border-bottom: 15px solid transparent;
		bottom: -30px;
		content: '';
		display: block;
		height: 0;
		position: absolute;
		right: 20%;
		width: 0;
	}
	&:after {
		border-left: 15px solid white;
		border-right: 15px solid transparent;
		border-top: 15px solid white;
		border-bottom: 15px solid transparent;
		bottom: -25px;
		content: '';
		display: block;
		height: 0;
		margin-right: -2px;
		position: absolute;
		right: 20%;
		width: 0;
	}
	.md-button {
		margin-left: 0;
		width: 100%;
	}
}

.toggle {
	bottom: -1.5rem;
	box-sizing: border-box;
	position: absolute;
	right: 0;
	width: 100%;
	.open {
		text-align: right;
		.md-icon {
			cursor: pointer;
		}
	}
}