.picker
  position: relative
  display: flex
  justify-content: center
  box-sizing: border-box
  &-guide
    width: 25px
    height: 25px
    background-color: $white
    border: 1px solid $black
    border-radius: 50%
    &:focus
      outline: 0


  &-wheel
    position: relative
    margin: 10px 20px

  &-menu
    position: absolute
    top: 30px
    width: 600px
    &.is-hidden
      display: none
    &:focus
      outline: none
    +mobile()
      width: 300px
      top: 20px
      left: 20px

  &-recent
    display: flex
    justify-content: flex-end
    align-items: center
    width: 100%

  &-color
    width: 30px
    height: 30px
    border-radius: 50%
    margin: 0 5px
    background-color: $black
    &:last-child
      margin-right: 0
    &:first-child
      margin-left: 0

  &-value
    text-align: center

  &-cursor
    position: absolute
    top: 0
    left: 0
    margin: -6px
    width: 10px
    height: 10px
    border-radius: 50%
    border: 2px solid $white
    will-change: transform