@charset 'utf8'

@import '../styles/colors.sass'

=unselectable
  -webkit-touch-callout: none
  -webkit-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

.ng-daterangepicker
  width: 300px
  height: 50px
  background: $white
  display: inline-block
  border: 1px solid $border
  border-radius: 7px
  position: relative

  &.is-active
    border: 1px solid $blue

  .input-section
    width: calc(100% / 2)
    height: 50px
    display: block
    float: left
    outline: none
    padding: 7px 10px
    color: $text
    cursor: pointer
    position: relative

    &:first-child
      border-right: 1px solid $border-light

    .label-txt, .value-txt
      display: block

    .label-txt
      color: $blue
      font-size: 11px

    .value-txt
      color: $text
      font-size: 13px
      border-bottom: 1px solid transparent

    .cal-icon
      position: absolute
      display: block
      right: 10px
      bottom: 5px

      svg
        width: 20px
        height: 20px

        path
          fill: $blue-icon

  &.theme-green
    &.is-active
      border-color: $green
    .input-section
      .label-txt
        color: $green
      .cal-icon
        svg
          path
            fill: $green

  &.theme-teal
    &.is-active
      border-color: $teal
    .input-section
      .label-txt
        color: $teal
      .cal-icon
        svg
          path
            fill: $teal

  &.theme-cyan
    &.is-active
      border-color: $cyan
    .input-section
      .label-txt
        color: $cyan
      .cal-icon
        svg
          path
            fill: $cyan

  &.theme-grape
    &.is-active
      border-color: $grape
    .input-section
      .label-txt
        color: $grape
      .cal-icon
        svg
          path
            fill: $grape

  &.theme-red
    &.is-active
      border-color: $red
    .input-section
      .label-txt
        color: $red
      .cal-icon
        svg
          path
            fill: $red

  &.theme-gray
    &.is-active
      border-color: $gray
    .input-section
      .label-txt
        color: $gray
      .cal-icon
        svg
          path
            fill: $gray