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

.vs-button
  border: 0px
  margin: vs-var(button-margin)
  border-radius: vs-var(button-border-radius)
  transition: all .25s ease
  position: relative
  user-select: none
  z-index: 1
  overflow: hidden
  display: flex
  align-items: center
  justify-content: center
  padding: 0px
  outline: none
  font-size: .8rem
  box-sizing: border-box
  &.vs-component-dark
    &.vs-button--transparent
      color: vs-color('text') !important
  &--fff
    &:focus
      color: rgba(30,30,30,1) !important

  &__content
    padding: vs-var(button-padding)
    width: 100%
    display: flex
    align-items: center
    justify-content: center


  &--active-disabled
    pointer-events: none
    opacity: .6

  &:disabled
    pointer-events: none
    opacity: .35
  &.vs-button--animate:not(.vs-button--animate-inactive)
    .vs-button__content
      i
        font-size: 1.15rem
    &:hover
      .vs-button__content
        transform: translate(-100%)
      .vs-button__animate
        transform: translate(0%)
    &.vs-button--animate-vertical
      &:hover
        .vs-button__content
          transform: translate(0,-100%) !important
          opacity: 0
        .vs-button__animate
          transform: translate(0%) !important
    &.vs-button--animate-scale
      &:hover
        .vs-button__content
          transform: scale(1.4) !important
          opacity: 0
        .vs-button__animate
          opacity: 1
          transform: scale(1)
    &.vs-button--animate-rotate
      &:hover
        .vs-button__content
          transform: rotate(180deg) !important
          opacity: 0
        .vs-button__animate
          opacity: 1
          transform:  rotate(0)
    .vs-button__content
      transition: transform .25s ease

  &__animate
    position: absolute
    width: 100%
    height: 100%
    display: flex
    align-items: center
    justify-content: center
    top: 0px
    left: 0px
    transition: transform .25s ease
    transform: translate(100%)
    pointer-events: none
    &--vertical
      transform: translate(0,100%)
    &--scale
      transform: scale(.5)
      opacity: 0
    &--rotate
      transform: rotate(-180deg)
      opacity: 0

  &--block
    width: 100%
    display: block

  &--upload
    &:after
      content: ''
      position: absolute
      width: 100%
      height: 100%
      background: vs-color('color', .4)
      top: 0px
      left: 0px
      z-index: 1200
      animation: btnupload .7s ease infinite
      box-sizing: border-box

  &--loading
     pointer-events: none
     user-select: none

  .vs-button__loading
    width: 100%
    height: 100%
    position: absolute
    top: 0px
    left: 0px
    display: flex
    align-items: center
    justify-content: center
    background: vs-color('color', .8)
    border-radius: inherit
    &:after
      content: ''
      width: 17px
      height: 17px
      border: 2px dotted rgba(255,255,255,.6)
      border-top: 2px solid rgba(255,255,255, 0)
      border-bottom: 2px solid rgba(255,255,255, 0)
      border-right: 2px solid rgba(255,255,255, 0)
      border-radius: 50%
      position: absolute
      animation: btnload .6s linear infinite
      box-sizing: border-box
    &:before
      position: absolute
      content: ''
      width: 17px
      height: 17px
      border: 2px solid rgb(255,255,255)
      border-top: 2px solid rgba(255,255,255, 0)
      border-bottom: 2px solid rgba(255,255,255, 0)
      border-right: 2px solid rgba(255,255,255, 0)
      border-radius: 50%
      animation: btnload .6s ease infinite
      box-sizing: border-box


  // SIZE -----
  &--size-xl
    border-radius: 20px
    .vs-button__content
      padding: 15px 20px
      font-size: 1.1rem
  &--size-large
    font-size: 1rem
    border-radius: 15px
    .vs-button__content
      padding: 10px 15px
  &--size-small
    font-size: .75rem
    border-radius: 9px
    .vs-button__content
      padding: 5px 10px
  &--size-mini
    font-size: .6rem
    border-radius: 7px
    .vs-button__content
      padding: 3px 8px
  // SIZE - CLOSE -----

  &--circle
    border-radius: 25px

  &--square
    border-radius: 0px

  &--icon
    display: flex
    align-items: center
    justify-content: center
    .vs-button__content
      padding: 8px 8px
    i
      font-size: 1.15rem

  // Type Button Style

.vs-button--default
  background: vs-color(color, 1)
  color: #fff
  &.vs-button--active
    box-shadow: 0px 10px 20px -10px vs-color(color, 1)
    transform: translate(0,-3px)
  &:hover
    box-shadow: 0px 10px 20px -10px vs-color(color, 1)
    transform: translate(0,-3px)

.vs-button--flat
  background: vs-color(color, .15)
  color: vs-color(color, 1)
  &.vs-button--dark
    color: vs-color(text, 1)
  &:hover
    background: vs-color(color, .25)
  &:focus
    color: #fff
    background: vs-color(color, 1)
    transition: all .25s ease, background .25s ease .25s
  &.vs-button--active
    background: vs-color(color, 1)
    color: #fff

.vs-button--floating
  background: vs-color(color, 1)
  color: #fff
  box-shadow: 0px 8px 20px -6px vs-color(color, 1)
  transform: translate(0,-3px)
  &:hover
    box-shadow: 0px 8px 20px -6px vs-color(color, 1)
    transform: translate(0,-6px)
  &:focus
    transform: translate(0,0px)
    box-shadow: 0px 0px 0px 0px vs-color(color, 1)
  &.vs-button--active
    transform: translate(0,0px)
    box-shadow: 0px 0px 0px 0px vs-color(color, 1)

.vs-button--border
  background: vs-color(color, 0)
  color: vs-color(color, 1)
  &:before
    content: ''
    border: 2px solid vs-color(color, 1)
    position: absolute
    top: 0px
    left: 0px
    width: 100%
    height: 100%
    border-radius: inherit
    background: transparent
    pointer-events: none
    transition: all .25s ease
    box-sizing: border-box
  &:hover
    &:before
      border: 2px solid vs-color(color, .5)
  &:focus
    color: #fff
    background: vs-color(color, 1)
  &.vs-button--active
    background: vs-color(color, 1)
    color: #fff

.vs-button--gradient
  background: vs-color('color')
  color: #fff
  overflow: hidden
  &.vs-button--primary, &.vs-button--success
    &::before
      filter: hue-rotate(40deg)
  &::before
    content: ''
    background: linear-gradient(30deg, vs-color('color',0) 33%, vs-color('color', 1) 100%)
    position: absolute
    top: 0px
    left: 0px
    width: 100%
    height: 100%
    border-radius: inherit
    pointer-events: none
    transition: all .4s ease
    z-index: -1
    filter: hue-rotate(-40deg)
    box-sizing: border-box

  &:hover
    transform: translate(0, -3px)
    box-shadow: 0px 10px 20px -10px vs-color('color', .7)
    &::before
      opacity: 0
      // transform: translate(50%, -50%)
  &.vs-button--active
    transform: translate(0, -3px)
    box-shadow: 0px 10px 20px -10px rgba(0,0,0,.35)

.vs-button--relief
  background: vs-color('color')
  color: #fff
  overflow: hidden
  transform: translate(0) scale(1,1)
  .vs-button__content
    transition: all .25s ease
  &.vs-button--icon
    &.vs-button--active
      height: auto
  &::before
    content: ''
    position: absolute
    bottom: 0px
    left: 0px
    width: 100%
    height: calc(100% - 3px)
    border-radius: inherit
    pointer-events: none
    transition: all .4s ease
    z-index: -1
    filter: contrast(2) grayscale(.4)
    border-bottom: 3px solid vs-color('color')
    box-sizing: border-box
  &:active
    transform: translate(0,1px)
    .vs-button__content
      padding-bottom: 6px
    &::before
      border-bottom: 0px solid vs-color('color')
  &.vs-button--active
    transform: translate(0,1px)
    .vs-button__content
      padding-bottom: 6px
    &::before
      border-bottom: 0px solid vs-color('color')

.vs-button--transparent
  background: transparent
  color: vs-color('color')
  overflow: hidden
  &::before
    content: ''
    background: vs-color('color', .1)
    // background: vs-color('color', vs-var('background-opacity'))
    position: absolute
    bottom: 0px
    left: 0px
    width: 100%
    height: 100%
    border-radius: inherit
    pointer-events: none
    transition: all .25s ease
    z-index: -1
    transform: scale(.5)
    opacity: 0
    box-sizing: border-box
  &:active:not(.vs-button--active)
    &::before
      transform: scale(.9) !important
  &:hover
    &::before
      opacity: 1
      transform: scale(1)
  &.vs-button--active
    &::before
      background: vs-color('color', .2)
      opacity: 1
      transform: scale(1)

.vs-button--shadow
  background: vs-color('background')
  color: vs-color('text')
  overflow: hidden
  box-shadow: 0px 0px 0px 0px rgba(0,0,0, vs-var(shadow-opacity))
  &:active:not(.vs-button--active)
    transform: translate(0,-1px)
    box-shadow: 0px 5px 15px 0px rgba(0,0,0, vs-var(shadow-opacity)) !important
  &:hover
    transform: translate(0,-3px)
    box-shadow: 0px 8px 25px 0px rgba(0,0,0, vs-var(shadow-opacity))
  &.vs-button--active
    transform: translate(0,-3px)
    box-shadow: 0px 8px 25px 0px rgba(0,0,0, vs-var(shadow-opacity))

@keyframes btnload
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)

@keyframes btnupload
  0%
    transform: translate(0, 110%)
  100%
    transform: translate(0,-110%)