// transition

.fadeselect-enter-active
  transition: transform .2s, opacity .2s;

.fadeselect-leave-active
  transition: transform .150s, opacity .150s;

.fadeselect-enter, .fadeselect-leave-to /* .fade-leave-active below version 2.1.8 */
  opacity: 0;
  transform: translate(0, 0px) scale(0.950)
  box-shadow: 0 10px 0 -5px rgba(0, 0, 0, 0);

.input-select-con
  position relative

.con-select
  position: relative;
  clear both

  &.activeOptions:not(.autocompletex)
    .input-select
      opacity: 0;
      transform: scale(1.1);

  &.activeOptions
    .vs-select--icon
      propWithDir(transform, null, (0 -50%), rotate(-180deg))

.vs-select--icon
  position: absolute;
  propWithDir(right, null, 5px)
  font-size: 1.0625em;
  top: 50%;
  pointer-events none;
  transform: translate(0, -50%);
  transition: all .2s ease;

.vs-select--input
  color: inherit
  width: 100%
  position: relative;
  padding: 7px;
  border-radius: 5px;
  border: $vs-border
  transition: all .2s ease;
  propWithDir(padding, right, 20px)
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;

  &:hover
    border: border 1px solid rgba(0, 0, 0, .4)

  &-con
    position: relative;

  &:disabled
    opacity $vs-disabled-opacity
    cursor: default
    pointer-events: none

.vs-select--label
  propWithDir(padding, left, 5px)
  font-size: .85rem
  color $vs-label-color

.con-text-validation
  position: relative
  font-size: .65rem
  overflow: hidden
  transition: $vs-transition;

  .span-text-validation
    padding: 2px 4px;
    padding-bottom: 4px
    display: block

.scrollx
  ul
    padding-right: 4px;

.vs-select--options
  padding: 4px;
  padding-top: 6px;
  propWithDir(padding, left, 5px)
  padding-bottom: 6px;
  box-shadow: $vs-box-shadow;
  border-radius: 5px;
  position: absolute;
  z-index: 40000;
  background: $vs-background;

  ul
    max-height: 260px;
    overflow: auto;
    propWithDir(padding, left, 0)
    padding: 0

    li
      margin: 0;

.vs-select--item
  dirValue(text-align, left)
  color: rgba(0, 0, 0, .8)
  padding: 7px;
  border 0;
  position relative
  border-top: 1px solid $border-color
  border-bottom: 1px solid $border-color
  transition: all .3s ease
  margin: 0 !important
  cursor pointer

  &:hover
    background: rgb(245, 245, 245)

  &:focus
    background: rgb(245, 245, 245)

  &.con-icon.active
    padding-left: 25px;

    .vs-select--item-icon
      opacity: 1;
      transform: translate(0, -50%);

.vs-select--item-icon
  position: absolute;
  font-size: 1.0em;
  left: 5px;
  propWithDir(transform, null, (-100% -50%))
  opacity: 0;
  transition: all .2s ease;
  top: 50%;


for colorx, i in $vs-colors
  .vs-select-{colorx}
    .vs-select--item
      &.active
        background: getColor(colorx, .1)
        color: getColor(colorx);
        font-weight: bold;
    &.activeOptions .vs-select--label
      color: getColor(colorx)

for colorx, i in $vs-validation-colors
  .input-select-validate-{colorx}
    .input-select-con
      .input-select
        border-color: getColor(colorx)

      .vs-select--icon
        color getColor(colorx)


// item style //

.vs-select--item
  background: transparent
  padding: 5px;
  width: 100%;
  margin: 0
  text-transform: capitalize;

  &.disabled
    opacity: $vs-disabled-opacity;
    cursor: default
    pointer-events: none

  .searchx
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    color: inherit;


// vs-select-group

.vs-select-group
  h4
    propWithDir(padding, left, 10px)
    cursor default
    padding-bottom: 5px

  ul
    padding-bottom 5px
  li
    propWithDir(border, left, 1px solid rgba(0, 0, 0, .1))
    propWithDir(margin, left, 15px, !important)
    propWithDir(padding, left, 15px, !important)
    list-style none
    width: calc(100% - 15px);


.vs-select--icon-clear
  position absolute
  propWithDir(right, null, 5px)
  z-index 200
  top 50%
  cursor pointer
  transform: translate(0, -50%) rotate(45deg)
  border 0
  width: 15px
  height 15px
  border-radius: 0 5px 5px 0
  background: inherit
  color: inherit
  opacity 0
  visibility: hidden
  transition: all .2s ease

  &.activeBtnClear
    opacity 1 !important
    visibility visible !important
    transform: translate(0, -50%) rotate(0deg) !important

  i
    font-size: .9rem