// Can this be deleted?

@import '../../../brand-globals/src/less/alerts';

.alert {
  box-shadow: 0 2px 3px 0 rgba(0,0,0,.075);
  border-width: 2px;
  padding-left:80px;
  position: relative;
  *:last-child {
    margin-bottom:0;
  }
 &:before {
   display: inline-block;
    content: "";
    height: 24px;
    width: 24px;
    box-shadow: 0px 0px 0px 8px @brand-info-light;
    border-radius: 50%;
    position: absolute;
    left: 30px
  }
  .strong {
    font-weight: 700
  }
}

@svg-info-fill:    fade(@brand-info-darkest, 99%);
@svg-danger-fill:  fade(@brand-danger-darkest, 99%);
@svg-warning-fill: fade(@brand-warning-darkest, 99%);
@svg-success-fill: fade(@brand-success-darkest, 99%);

.alert-info:before {
  background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z' fill='@{svg-info-fill}'/></svg>");
  box-shadow: 0px 0px 0px 8px @brand-info-light;
}
.alert-danger:before {
  background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z' fill='@{svg-danger-fill}'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  box-shadow: 0px 0px 0px 8px @brand-danger-light;
}
.alert-warning:before {
  background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z' fill='@{svg-warning-fill}'/></svg>");
  box-shadow: 0px 0px 0px 8px @brand-warning-light;
}
.alert-success:before {
  background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' fill='@{svg-success-fill}'/></svg>");
  box-shadow: 0px 0px 0px 8px @brand-success-light;
}