@import '../styles/mixins'
// @import '../styles/colors'
.vs-icon-close
  width: 30px
  height: 30px
  display: flex
  align-items: center
  justify-content: center
  position: relative
  transition: all .25s ease
  &:before
    background: -color('color', 1)
    content: ''
    position: absolute
    width: 16px
    transform: rotate(-45deg)
    height: 2px
    border-radius: 2px
    transition: all .3s ease
  &:after
    background: -color('color', 1)
    content: ''
    position: absolute
    width: 16px
    height: 2px
    transform: rotate(45deg)
    border-radius: 2px
    transition: all .3s ease
  &.vs-icon-hover-less
    &:hover
      &:after
        width: 12px
        transform: rotate(180deg)
      &:before
        width: 12px
        transform: rotate(180deg)


.vs-icon-plus
  width: 30px
  height: 30px
  display: flex
  align-items: center
  justify-content: center
  position: relative
  transition: all .25s ease
  cursor: pointer
  &:before
    background: -color('color', 1)
    content: ''
    position: absolute
    width: 14px
    transform: rotate(0deg)
    height: 2px
    border-radius: 2px
    transition: all .3s ease
  &:after
    background: -color('color', 1)
    content: ''
    position: absolute
    width: 14px
    height: 2px
    transform: rotate(90deg)
    border-radius: 2px
    transition: all .4s ease
  &:hover:not(.less)
    transform: rotate(-90deg)
  &.less
    &:hover
      transform: scale(.75)
    &:after
      transform: rotate(180deg)


.vs-icon-check
  width: 23px
  height: 23px
  display: flex
  align-items: center
  justify-content: center
  transition: all .25s ease
  border-radius: inherit
  // transform: rotate(45deg)
  span
    transform: rotate(45deg)
    display: block
    position: relative
    width: 8px
    height: 13px
    margin-top: -4px
    .line1
      background: transparent
      content: ''
      position: absolute
      height: 2px
      border-radius: 2px
      transition: all .2s ease
      border-radius: 5px
      z-index: 100
      width: 8px
      bottom: 0px
      &:after
        content: ''
        position: absolute
        width: 0%
        height: 2px
        background: #fff
        transition: all .25s ease
        border-radius: 5px 0px 0px 5px
    .line2
      bottom: 0px
      right: 0rem
      z-index: 100
      border-radius: 5px
      background: transparent
      content: ''
      position: absolute
      height: 13px
      border-radius: 5px
      transition: all .2s ease
      width: 2px
      &:after
        content: ''
        position: absolute
        width: 2px
        height: 0%
        background: #fff
        transition: all .25s ease
        bottom: 0px
        border-radius: 5px 5px 0px 0px
  &.active
    &:before
      width: 8px
    &:after
      width: 4px

  &.indeterminate
    span
      transform: rotate(0)
      height: auto
      margin: 0px
      width: auto
      &:after
        position: relative
        content: ''
        width: 10px
        height: 2px
        background: #fff
        display: block
      .line1
        transform: rotate(-45deg)
        bottom: 0px
        right: -1px
        opacity: 0
        display: none
      .line2
        right: 0px !important
        bottom: -0.14rem !important
        transform: rotate(45deg) !important
        transition: all .25s ease !important
        height: 11px !important
        display: none

.vs-icon-arrow
  pointer-events: none
  width: 7px
  height: 7px
  transform: rotate(-135deg)
  transition: all .25s ease
  transform-origin: center
  &:after
    content: ''
    width: 100%
    height: 1px
    background: -color('text')
    position: absolute
    display: block
    top: 0px
  &:before
    top: 0px
    content: ''
    width: 1px
    height: 100%
    background: -color('text')
    position: absolute
    display: block