@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

.calendar
  +unselectable
  width: 500px
  border: 1px solid $blue
  border-radius: 7px
  background: $white
  z-index: 100

  &:after
    content: ''
    position: absolute
    display: block
    width: 30px
    height: 30px
    top: -15px
    left: 65px
    transform: rotate(45deg)
    border-top: 1px solid $blue
    border-left: 1px solid $blue
    background: $white
    transition: left 0.5s

  &.is-opened
    display: block

  &.is-to

    &:after
      left: 215px
  .time-block
    text-align: center;
    a
      color: $time-link;
      text-decoration: none;
      cursor: pointer;
      &:hover
        color: $dark
  .timer-container
    .timer-header
      width: 100%
      height: 50px
      display: flex
      justify-content: space-between
      .timer-back-icon
        display: block
        width: 12px
        height: 20px
        cursor: pointer
      .time-heading
        font-size: 17px
        color: $text
        margin-bottom: 20px
    .time-field
      margin-bottom: 10px;
      .time-label
        text-align: center;
    input.time-range
      -webkit-appearance: none
      width: 100%
      height: 5px
      border-radius: 5px
      background: lighten($blue, 50%)
      outline: none
      padding: 0
      margin: 0
      
      &::-webkit-slider-thumb
        -webkit-appearance: none
        appearance: none
        width: 15px
        height: 15px
        border-radius: 50%
        background: $blue
        cursor: pointer
        transition: background .15s ease-in-out

        &:hover
          background: lighten($blue, 10%)

      &:active::-webkit-slider-thumb
        background: lighten($blue, 10%)

      &::-moz-range-thumb
        width: 20px
        height: 20px
        border: 0
        border-radius: 50%
        background: lighten($blue, 50%)
        cursor: pointer
        transition: background .15s ease-in-out

        &:hover 
          background: lighten($blue, 10%)

      &:active::-moz-range-thumb
        background: lighten($blue, 10%)

  .calendar-container
    display: inline-block
    width: 340px
    height: 100%
    padding: 20px
    border-right: 1px solid $border-light
    float: left

    .controls
      width: 100%
      height: 20px
      display: flex
      justify-content: space-between
      align-items: center

      .control-icon
        display: block
        width: 12px
        height: 20px
        cursor: pointer

      .control-title
        font-size: 17px
        color: $text

    .day-names
      display: inline-block
      width: 300px
      margin-top: 30px
      margin-bottom: 20px

      .day-name
        width: calc(300px / 7)
        font-size: 13px
        color: $grey
        display: block
        float: left
        text-align: center
        font-weight: bold

    .days
      display: inline-block
      width: 300px

      .day
        width: calc(300px / 7)
        font-size: 13px
        color: $grey
        display: block
        float: left
        text-align: center
        margin-bottom: 15px
        cursor: pointer
        font-weight: bold

        &.is-within-range
          background: $blue-light
          color: $dark

        &.is-from, &.is-first-weekday
          border-top-left-radius: 50%
          border-bottom-left-radius: 50%

        &.is-to, &.is-last-weekday
          border-top-right-radius: 50%
          border-bottom-right-radius: 50%

        .day-num
          display: flex
          justify-content: center
          align-items: center
          float: left
          width: calc(300px / 7)
          height: 100%
          border-radius: 50%
          padding: 10px 15px

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

  .side-container
    width: 158px
    min-height: 390px
    padding: 10px
    display: flex
    align-items: center
    position: relative

    .side-container-buttons
      width: 138px

      .side-button
        background: $white
        border-radius: 15px
        border: 1px solid $blue
        height: 30px
        width: 138px
        display: block
        text-align: center
        outline: none
        margin-bottom: 15px
        color: $text-button
        font-size: 13px
        cursor: pointer

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

    .close-icon
      position: absolute
      width: 20px
      height: 20px
      top: 20px
      right: 15px
      cursor: pointer

  &.theme-green
    border-color: $green
    &:after
      border-top-color: $green
      border-left-color: $green
    .calendar-container
      .timer-container
        input.time-range
          background: lighten($green, 30%)
          
          &::-webkit-slider-thumb
            background: $green

            &:hover
              background: lighten($green, 10%)

          &:active::-webkit-slider-thumb
            background: lighten($green, 10%)

          &::-moz-range-thumb
            background: $green

            &:hover 
              background: lighten($green, 10%)

          &:active::-moz-range-thumb
              background: lighten($green, 30%)
      .days
        .day
          &.is-within-range
            background: lighten($green, 20)
          .day-num
            &:hover, &.is-active
              background: $green
    .side-container
      .side-container-buttons
        .side-button
          border-color: $green
          &:hover, &.is-active
            background: $green

  &.theme-teal
    border-color: $teal
    &:after
      border-top-color: $teal
      border-left-color: $teal
    .calendar-container
      .timer-container
        input.time-range
          background: lighten($teal, 30%)
          
          &::-webkit-slider-thumb
            background: $teal

            &:hover
              background: lighten($teal, 10%)

          &:active::-webkit-slider-thumb
            background: lighten($teal, 10%)

          &::-moz-range-thumb
            background: $teal

            &:hover 
              background: lighten($teal, 10%)

          &:active::-moz-range-thumb
              background: lighten($teal, 30%)
      .days
        .day
          &.is-within-range
            background: lighten($teal, 20)
          .day-num
            &:hover, &.is-active
              background: $teal
    .side-container
      .side-container-buttons
        .side-button
          border-color: $teal
          &:hover, &.is-active
            background: $teal

  &.theme-cyan
    border-color: $cyan
    &:after
      border-top-color: $cyan
      border-left-color: $cyan
    .calendar-container
      .timer-container
        input.time-range
          background: lighten($cyan, 30%)
          
          &::-webkit-slider-thumb
            background: $cyan

            &:hover
              background: lighten($cyan, 10%)

          &:active::-webkit-slider-thumb
            background: lighten($cyan, 10%)

          &::-moz-range-thumb
            background: $cyan

            &:hover 
              background: lighten($cyan, 10%)

          &:active::-moz-range-thumb
              background: lighten($cyan, 30%)
      .days
        .day
          &.is-within-range
            background: lighten($cyan, 20)
          .day-num
            &:hover, &.is-active
              background: $cyan
    .side-container
      .side-container-buttons
        .side-button
          border-color: $cyan
          &:hover, &.is-active
            background: $cyan

  &.theme-grape
    border-color: $grape
    &:after
      border-top-color: $grape
      border-left-color: $grape
    .calendar-container
      .timer-container
        input.time-range
          background: lighten($grape, 30%)
          
          &::-webkit-slider-thumb
            background: $grape

            &:hover
              background: lighten($grape, 10%)

          &:active::-webkit-slider-thumb
            background: lighten($grape, 10%)

          &::-moz-range-thumb
            background: $grape

            &:hover 
              background: lighten($grape, 10%)

          &:active::-moz-range-thumb
              background: lighten($grape, 30%)
      .days
        .day
          &.is-within-range
            background: lighten($grape, 20)
          .day-num
            &:hover, &.is-active
              background: $grape
    .side-container
      .side-container-buttons
        .side-button
          border-color: $grape
          &:hover, &.is-active
            background: $grape

  &.theme-red
    border-color: $red
    &:after
      border-top-color: $red
      border-left-color: $red
    .calendar-container
      .timer-container
        input.time-range
          background: lighten($red, 30%)
          
          &::-webkit-slider-thumb
            background: $red

            &:hover
              background: lighten($red, 10%)

          &:active::-webkit-slider-thumb
            background: lighten($red, 10%)

          &::-moz-range-thumb
            background: $red

            &:hover 
              background: lighten($red, 10%)

          &:active::-moz-range-thumb
              background: lighten($red, 30%)
      .days
        .day
          &.is-within-range
            background: lighten($red, 20)
          .day-num
            &:hover, &.is-active
              background: $red
    .side-container
      .side-container-buttons
        .side-button
          border-color: $red
          &:hover, &.is-active
            background: $red

  &.theme-gray
    border-color: $gray
    &:after
      border-top-color: $gray
      border-left-color: $gray
    .calendar-container
      .timer-container
        input.time-range
          background: lighten($gray, 30%)
          
          &::-webkit-slider-thumb
            background: $gray

            &:hover
              background: lighten($gray, 10%)

          &:active::-webkit-slider-thumb
            background: lighten($gray, 10%)

          &::-moz-range-thumb
            background: $gray

            &:hover 
              background: lighten($gray, 10%)

          &:active::-moz-range-thumb
              background: lighten($gray, 30%)
      .days
        .day
          &.is-within-range
            background: lighten($gray, 20)
          .day-num
            &:hover, &.is-active
              background: $gray
    .side-container
      .side-container-buttons
        .side-button
          border-color: $gray
          &:hover, &.is-active
            background: $gray