.dd-wrapper
  position: relative
  width: 222px
  font-size: 1.6rem
  user-select: none

  .dd-header
    display: flex
    align-items: center
    justify-content: space-between
    position: relative
    border: 1px solid rgb(223, 223, 223)
    border-radius: 3px
    background-color: white
    line-height: 38px
    cursor: default
    cursor: pointer

    span
      display: flex
      margin-right: 20px

  .dd-header-title
    margin: 2px 20px
    margin-right: 30px
    font-weight: 300

  .angle-down
    margin-right: 20px
    color: black

  .dd-list
    position: absolute
    z-index: 10
    width: 100%
    max-height: 215px
    border: 1px solid rgb(223, 223, 223)
    border-top: none
    border-bottom-left-radius: 3px
    border-bottom-right-radius: 3px
    box-shadow: 0 2px 5px -1px rgb(232, 232, 232)
    background-color: white
    font-weight: 700
    text-align: left
    -webkit-overflow-scrolling: touch

    .dd-scroll-list
      overflow-y: scroll
      max-height: 215px
      padding: 15px 0

      .dd-list-item
        display: inline-block
        overflow: hidden
        width: 100%
        padding: 8px 10px
        font-size: 1.5rem
        line-height: 1.6rem
        white-space: nowrap
        text-overflow: ellipsis
        cursor: default
        cursor: pointer

        &.no-result
          font-weight: normal
          cursor: default

          &:hover
            background-color: transparent
            color: black

        &:hover
          background-color: #FFCC01
          color: white

          & > span > svg > path
            fill: white

    .dd-list-search-bar
      width: 100%
      height: 40px
      padding: 0 10px
      border: none
      border-bottom: 1px solid #DFDFDF
      font-size: inherit

      &::placeholder
        color: rgb(200, 200, 200)

    &.searchable
      overflow-y: hidden
      padding: 0

      .dd-scroll-list
        max-height: calc(215px - 40px)
        padding: 10px 0
