.con-vs-alert
  // padding: 10px
  border-radius: 6px
  color: rgb(255,255,255)
  width: 100%
  position relative
  font-size: .8rem
  cursor: default
  transition: all .25s ease
  overflow hidden
.icon-alert
  height: 100%
  position: absolute
  // left: 0px
  propWithDir(left, null, 0)
  padding: 10px
  top 0px
  font-size: 1.1rem
  display: flex
  align-items: center
.vs-alert
  padding: 10px
  overflow hidden
  position relative
  &.con-icon
    // padding-left: 40px
    propWithDir(padding, left, 40px)
.vs-alert--title
  font-size .9rem
  font-weight: bold
  // margin-bottom: 3px
  padding: 8px 10px
.vs-alert--close
  position: relative
  margin-top: 4px
  // margin-right: 4px
  propWithDir(margin, right, 4px)
  display: inline-block
  dirValue(float, right)
  padding: 4px
  border-radius: 6px
  padding-bottom: 1px
  // padding-top: 1px
  cursor: pointer
  transition: all .2s ease
  &:hover
    box-shadow: 0px 5px 15px 0px rgba(0,0,0,.1)

for colorx, i in $vs-colors
  .con-vs-alert-{colorx}
    background: getColor(colorx, .15)
    box-shadow 0px 0px 25px 0px getColor(colorx, .15)
    color: getColor(colorx, 1)
    h4
      box-shadow: 0px 6px 15px -7px getColor(colorx, .4)
    .con-x
      background: getColor(colorx, 1)
      color: rgb(255,255,255)