.p-picker-input
  position relative
  display flex
  align-items center
  border-width 1px
  border-style solid
  border-color $grey-400
  border-radius 4px
  height 32px
  line-height 30px
  font-size 0
  cursor pointer
  transition border .3s
  user-select none
  &:hover
    border-color $blue-500
.p-picker-input-normal
  padding-left 12px
.p-picker-input-tip
  font-size 14px
  color $grey-400
.p-picker-input-trigger
  justify-content space-around
.p-picker-input-tip-single
  width 126px
.p-picker-input-tip-double
  display flex
  //justify-content center
.p-picker-input-tip-to
  width 38px
  line-height 30px
  text-align center
  font-size 14px
  color $grey-500
.p-picker-left-box-shadow
  box-shadow -1px 0 2px 0 rgba(31,35,41,.08)
.p-picker-svg-box
  display flex
  align-items center
  justify-content center
  width 40px
  height 30px
  svg
    width 16px
    height 16px
  .p-picker-clear-svg
    z-index 1000
    path
      transition fill .3s
    &:hover
      path
        fill $blue-500
.p-picker-input-values
  line-height 30px
  font-size 14px
  color $grey-900
.p-picker-input-tip-values
  text-align center
.p-picker-input-single
  width 180px
  text-align left
  &.p-picker-input-triangle
    .p-picker-input-tip,
    .p-picker-input-values
      text-align center
    .p-picker-input-tip-single
      width 138px

.p-picker-input-double-tip
  display flex
.p-picker-input-double
  width 240px
  .p-picker-input-double-tip
    width 188px
  .p-picker-input-tip-values
    width 75px
    text-align center
  &.p-picker-input-triangle
    .p-picker-input-double-tip
      width 200px
      .p-picker-input-tip-values
        width 81px
.p-picker-input-double-max
  width 308px
  .p-picker-input-double-tip
    width 254px
  .p-picker-input-tip-values
    width 108px
    text-align center
  &.p-picker-input-triangle
    .p-picker-input-double-tip
      width 266px
    .p-picker-input-tip-values
      width 114px

.p-picker-input-alert
  display flex
  margin-top 12px
  margin-bottom @margin-top
  padding-left 12px
  padding-right 12px
  border 1px solid $blue-500
  border-radius 4px
  width 294px
  height 32px
  line-height 30px
  .p-picker-input-values, .p-picker-input-tip
    width 100%
    text-align center
  .p-picker-input-alert-tip
    width 116px
.p-picker-input-alert-picker
  width 136px

.p-picker-input-alert-shadow
  position relative
  &::after
    position absolute
    right 0
    top 1px
    display block
    box-shadow -1px 0 2px 0 rgba(31,35,41,.08)
    width 12px
    height 30px
    content ''

.p-picker-ellipsis
  overflow hidden
  white-space nowrap
  //text-overflow ellipsis
.p-picker-ellipsis-overflow
  text-overflow ellipsis

.p-picker-triangle
  position relative
  display block
  padding-left 2px
  padding-right 2px
  width 20px
  height 30px
  text-align center
  z-index 10
  &::after
    position absolute
    display block
    background-color $grey-300
    width 1px
    height 16px
    content ''
  svg
    margin-top 7px
    margin-bottom 7px
.p-picker-triangle-left
  &::after
    top 7px
    right 0
.p-picker-triangle-right
  &::after
    top 7px
    left 0
.p-picker-triangle-disabled
  cursor not-allowed
  svg
    path
      fill $grey-300