.alert { padding: 8px 35px 8px 14px; background-color: scale-color($danger, $lightness: 75%); color: #c09853; .close { position: relative; top: -2px; right: -21px; line-height: 18px; float: right; font-size: 1.429em; font-weight: bold; color: $primary; opacity: 0.2; filter: alpha(opacity = 20); @include hover { color: $primary; text-decoration: none; cursor: pointer; opacity: 0.4; filter: alpha(opacity = 40); } } button.close { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; } &.alert-success { background-color: dark-light-diff($success, $secondary, 50%, -60%); color: $primary; } &.alert-error { background-color: rgba(dark-light-diff($danger, $secondary, 50%, -60%), .5); color: $primary; } &.alert-info { background-color: dark-light-diff($tertiary, $secondary, 85%, -65%); color: $primary; .clickable { color: $tertiary; } } }