.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: 0
  propWithDir(left, null, 0)
  padding: 10px
  top 0
  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: 0 5px 15px 0 rgba(0, 0, 0, .1)

for colorx, i in $vs-colors
  .con-vs-alert-{colorx}
    background: getColor(colorx, .15)
    box-shadow 0 0 25px 0 getColor(colorx, .15)
    color: getColor(colorx, 1)

    h4
      box-shadow: 0 6px 15px -7px getColor(colorx, .4)

    .con-x
      background: getColor(colorx, 1)
      color: rgb(255, 255, 255)