$selectbox-bg: #F2F4F7
$selectbox-bg-secondary: #FFFFFF
$selectbox-border: #CED0DA
$chevron-icon: #A8AAB7
$selectbox-option-active: #F1F4F8

$slider-bg: #E2E7EE
$slider-bar: #1991EB

$toggle-background: #DFE1E5
$toggle-enabled-background: #36AF47

.selectbox-container
  display: flex
  align-items: center
  width: 100%
  height: 40px
  border-radius: 4px
  border: 1px solid $selectbox-border
  position: relative
  margin: 5px 0
  cursor: pointer
  background: linear-gradient(0deg, $selectbox-bg 0%, $selectbox-bg-secondary 100%)
  font-size: 13px

  .chevron-icon
    position: absolute
    top: 8px
    right: 15px
    color: $chevron-icon
    width: 12px
    height: 12px

  .selectbox-value
    width: 100%
    padding: 0 20px

  .selectbox-options
    position: absolute
    display: inline-block
    top: 38px
    width: 100%
    left: 0
    right: 0
    background: $white
    border: 1px solid $selectbox-border
    border-bottom-left-radius: 4px
    border-bottom-right-radius: 4px
    z-index: 9

    .selectbox-option
      display: flex
      width: 100%
      height: 40px
      align-items: center
      padding: 0 20px
      position: relative

      .check-icon
        position: absolute
        color: $blue
        width: 15px
        height: 15px
        top: 8px
        right: 15px

      &:hover, &.is-active
        background: $selectbox-option-active
        color: $blue

  .selectbox-colors
    display: inline-block
    margin-right: 10px

    .selectbox-color
      display: block
      float: left
      width: 10px
      height: 10px

.slider-container
  margin: 10px 0

  .slider-bg
    background: $slider-bg
    height: 4px
    border-radius: 10px
    position: relative

    .slider-bar
      background: $slider-bar
      border-radius: 10px
      height: 4px
      position: absolute
      left: 0
      top: 0

      .slider-dot
        position: absolute
        top: -6px
        right: -8px
        background: #F2F4F8
        border: 1px solid #CED0DA
        width: 16px
        height: 16px
        border-radius: 4px
        cursor: pointer

.toggle-button
  width: 38px
  height: 20px
  background: $toggle-background
  border-radius: 83px
  position: relative
  cursor: pointer
  transition: background 300ms ease
  margin: 5px 0 10px 10px
  display: block
  float: left

  &.enabled
    background: $toggle-enabled-background

    .toggle-circle
      left: 20px

  .toggle-circle
    border-radius: 83px
    width: 16px
    height: 16px
    position: absolute
    top: 2px
    left: 2px
    background: $white
    transition: all 200ms ease