.red-pill, .blue-pill {
position: fixed; right: 16px; bottom: 16px; max-width: 280px; text-align: center; padding: 12px 16px; border-radius: 3px 3px 0 3px; color: #fff; display: none; &:after { position: absolute; content: ''; right: -12px; bottom: 0; width: 12px; height: 12px; box-sizing: border-box; border-right: 6px solid rgba(0,0,0,0); border-top: 6px solid rgba(0,0,0,0); border-left: 6px solid #2756db; border-bottom: 6px solid #2756db; } &.active { display: block; }
} .blue-pill {
background-color: #2756db; color: #fff;
} .red-pill {
background-color: #db3727; color: #fff; &:after { border-left: 6px solid #db3727; border-bottom: 6px solid #db3727; }
}