@import 'colors'

.ui-kit-calendar-container
  position: relative
  width: 170px
  margin: 0 10px 0 0
  display: block
  float: left
  z-index: 99
  
  .ui-kit-calendar-input
    border: 1px solid $grey
    border-radius: 10px
    display: flex
    justify-content: center
    align-items: center
    width: 70px
    height: 40px
    background: $input-background
    cursor: pointer
    text-align: center
    font-size: 0
    transition: all 300ms ease
    i
      color: $dark
      font-size: 20px
    &.opened
      width: 170px
      border: 1px solid $primary
      color: $primary
      background: rgba($primary, 0.15)
      font-size: 12px
      i
        color: $primary
    span
      display: none
      &.opened
        display: inline
        margin-right: 10px

  .ui-kit-calendar-cal-container
    position: absolute
    top: 55px
    right: 0
    color: $white
    background: $primary
    display: inline-block
    width: 300px
    border-radius: 3px
    visibility: hidden
    opacity: 0
    transition: visibility 0s, opacity 300ms linear 300ms
    &.opened
      visibility: visible 
      opacity: 1
    &:after
      position: absolute
      top: -15px
      right: 28px
      content: ""
      width: 0
      height: 0
      border-top: 15px solid transparent
      border-bottom: 15px solid transparent
      border-left: 15px solid $primary
      transform: rotate(-90deg)
    .ui-kit-calendar-cal-top
      width: 100%
      height: 40px
      line-height: 40px
      i
        display: block
        float: left
        font-size: 16px
        width: 40px
        height: 40px
        text-align: center
        cursor: pointer
      span
        display: block
        float: left
        width: 220px
        height: 40px
        font-size: 14px
        text-align: center
    .ui-kit-calendar-day-names
      width: 100%
      height: 23px
      background: $primary-dark
      span
        font-size: 10px
        line-height: 23px
        text-align: center
        display: block
        float: left
        width: calc(100% / 7)
        height: 23px
    .ui-kit-calendar-days
      width: 100%
      padding: 5px 0
      margin-bottom: 15px
      span
        font-size: 12px
        display: block
        float: left
        text-align: center
        height: 40px
        line-height: 40px
        width: calc(100% / 7)
        cursor: pointer
        border-radius: 50%
        &.today
          border: 1px solid $white
        &:hover, &.is-active
          background: $white
          color: $primary

  .ui-kit-calendar-container
  position: relative
  width: 170px
  margin: 0 10px 0 0
  display: block
  float: left
  z-index: 99
  
  .ui-kit-calendar-input
    border: 1px solid $grey
    border-radius: 10px
    display: flex
    justify-content: center
    align-items: center
    width: 70px
    height: 40px
    background: $input-background
    cursor: pointer
    text-align: center
    font-size: 0
    transition: all 300ms ease
    i
      color: $dark
      font-size: 20px
    &.opened
      width: 170px
      border: 1px solid $primary
      color: $primary
      background: rgba($primary, 0.15)
      font-size: 12px
      i
        color: $primary
    span
      display: none
      &.opened
        display: inline
        margin-right: 10px

  &.danger
    .ui-kit-calendar-input
      &.opened
        color: $red
        background: rgba($red, 0.15)
        border: 1px solid $red
        i
          color: $red
    .ui-kit-calendar-cal-container
      background: $red
      &:after
        border-left: 15px solid $red
      .ui-kit-calendar-day-names
        background: darken($red, 20)
      .ui-kit-calendar-days
        span
          &:hover, &.is-active
            color: $red

  &.warning
    .ui-kit-calendar-input
      &.opened
        color: $yellow
        background: rgba($yellow, 0.15)
        border: 1px solid $yellow
        i
          color: $yellow
    .ui-kit-calendar-cal-container
      background: $yellow
      &:after
        border-left: 15px solid $yellow
      .ui-kit-calendar-day-names
        background: darken($yellow, 20)
      .ui-kit-calendar-days
        span
          &:hover, &.is-active
            color: $yellow

  &.success
    .ui-kit-calendar-input
      &.opened
        color: $green
        background: rgba($green, 0.15)
        border: 1px solid $green
        i
          color: $green
    .ui-kit-calendar-cal-container
      background: $green
      &:after
        border-left: 15px solid $green
      .ui-kit-calendar-day-names
        background: darken($green, 20)
      .ui-kit-calendar-days
        span
          &:hover, &.is-active
            color: $green