@import '../../../styles/mixins'
@import '../../../styles/colors'
@import 'root'

.vs-alert
  background: vs-color('color', .1)
  color: vs-color('color', 1)
  width: 100%
  padding: 0px 20px
  border-radius: 0px 12px 12px 0px
  position: relative
  font-size: .9rem
  z-index: 10
  transition: height .25s ease
  overflow: hidden
  &::selection
   background: vs-color('color', .15)
  *::selection
   background: vs-color('color', .15)
  b
    font-weight: 600
  a
    color: inherit !important
    text-decoration: underline
    &:hover
      opacity: .6
  &::after
    content: ''
    background: vs-color('color', 1)
    left: 0px
    top: 0px
    width: 2px
    height: 100%
    position: absolute
  &--solid
    background: vs-color('color', 1)
    color: #fff
    .vs-alert__icon
      i
        color: #fff
      svg
        fill: #fff
    .vs-alert__close
      color: #fff
      box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .15)
      &:hover
        transform: translate(0,-2px)
        box-shadow: 0px 5px 18px 0px rgba(0, 0, 0, .15)
      svg
        fill: #fff
    &::after
      background: rgba(255, 255, 255, .4)
  &--border
    background: transparent
    &::before
      border: 1px solid vs-color('color', 1)
      border-left: 0px
      width: calc(100% - 2px)
      content: ''
      position: absolute
      height: calc(100% - 2px)
      top: 0px
      left: 0px
      z-index: -1
      border-radius: inherit
  &--shadow
    background: transparent
    box-shadow: 0px 4px 15px 0px vs-color('color', .12)
  &--gradient
    background: vs-color('color', 1)
    color: #fff
    border-radius: 12px
    .vs-alert__icon
      i
        color: #fff
      svg
        fill: #fff
    .vs-alert__close
      color: #fff
      box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .15)
      &:hover
        transform: translate(0,-2px)
        box-shadow: 0px 5px 18px 0px rgba(0, 0, 0, .15)
      svg
        fill: #fff
    &::after
      display: none
    &::before
      background: linear-gradient(30deg, vs-color('color',0) 33%, vs-color('color', 1) 100%)
      filter: hue-rotate(-50deg)
      width: 100%
      content: ''
      position: absolute
      height: 100%
      top: 0px
      left: 0px
      z-index: -1
      border-radius: inherit
  &--flat
    background: rgba(0,0,0,.03)
  &--relief
    background: vs-color('color', 1)
    color: #fff
    border-radius: 12px
    box-shadow: 6px 6px 0px 0px vs-color('color', .3)
    .vs-alert__icon
      i
        color: #fff
      svg
        fill: #fff
    .vs-alert__close
      color: #fff
      box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .15)
      &:hover
        transform: translate(0,-2px)
        background: rgba(0,0,0,.2)
        box-shadow: 0px 5px 18px 0px rgba(0, 0, 0, .15)
      svg
        fill: #fff
    &::after
      display: none



.vs-alert__title
  font-weight: 600
  font-size: 1rem
  padding: 15px
  display: flex
  align-items: center
  justify-content: space-between
  &--clickHidden
    cursor: pointer
    padding-right: 0px
  ~ .vs-alert__content
    .vs-alert__content__text
      padding-top: 0px


.vs-alert__content
  transition: height .25s ease
  overflow: hidden
  &__text
    padding: 15px 15px
    padding-top: 20px
    padding-bottom: 20px


.vs-alert__close
  position: absolute
  top: 9px
  right: 6px
  background: transparent
  border: 0px
  color: vs-color('color')
  width: 30px
  height: 30px
  display: flex
  align-items: center
  justify-content: center
  transition: all .25s ease
  box-shadow: 0px 0px 0px 0px vs-color('color', .3)
  border-radius: 10px
  padding: 0px
  // background-image: url(../../../icons/bx-x.svg)
  // background-position: center
  &:hover
    transform: translate(0,-2px)
    box-shadow: 0px 5px 18px 0px vs-color('color', .3)
  svg
    fill: vs-color('color')

.vs-alert__footer
  position: relative
  width: 100%
  padding: 10px 15px
  padding-top: 0px
  display: flex
  align-items: center
  justify-content: flex-end

.vs-alert__icon
  position: absolute
  width: 50px
  height: 100%
  left: 0px
  top: 0px
  display: flex
  align-items: center
  justify-content: center
  padding-left: 2px
  i
    font-size: 1.3rem
    color: vs-color('color', 1)
  svg
    width: 24px
    height: 24px
    fill: vs-color('color', 1)
  ~ .vs-alert__footer
    padding-left: 35px
  ~ .vs-alert__content
    padding-left: 20px
  ~ .vs-alert__title
    padding-left: 35px

.vs-alert__progress
  width: 100%
  position: absolute
  bottom: 0px
  left: 0px
  height: 2px
  background: vs-color('color', .2)
  &__bar
    width: 30%
    left: 0px
    position: relative
    height: 100%
    background: vs-color('color', 1)
    transition: all .25s ease

.vs-alert__pagination
  position: relative
  padding: 0px 20px
  display: flex
  align-items: center
  justify-content: flex-start
  margin-bottom: 10px
  span
    font-size: .8rem
    margin: 0px 8px
    min-width: 28px
    text-align: center
  button
    border: 0px
    background: transparent
    color: vs-color('color', 1)
    padding: 0px 7px
    font-size: 1rem
    background: vs-color('color', .1)
    border-radius: 8px
    transition: all .25s ease
    &:hover
      background: vs-color('color', 1)
      color: #fff