.entity-attribute-date-picker
  line-height: 1
  min-height: 0
  padding: 15px 0

  label
    display: inline-block
    position: relative

  input
    display: inline-block
    text-indent: 0
    +attribute-focus

  .date-field
    position: relative
    display: inline-block
    width: 175px
    cursor: pointer

    .icon
      position: absolute
      pointer-events: none
      left: 20px
      top: 19px
      img
        width: 20px
        max-height: 23px


    input
      min-height: 0
      width: 100%
      text-align: right
      padding: 23px 25px
      border: 1px solid $lighter-gray
      border-radius: 4px
      cursor: pointer

      &:focus
        border-color: rgba($brand-primary, 0.75)

  .time-field
    display: inline-block
    width: 101px
    border: 1px solid $lighter-gray
    border-radius: 4px

    &.hidden
      display: none

    >span
      display: inline-block
      width: 10px
      color: $light-gray
      font-size: 0.8rem
      line-height: 1
      text-align: center

    .ui-spinner
      position: relative
      border: none !important
      margin: 0
      width: 40px

      input
        width: 100%
        margin: 0
        padding: 23px 10px
        min-height: 0
        text-align: center

        &::-webkit-outer-spin-button, &::-webkit-inner-spin-button
          +appearance(none)

      .ui-spinner-button
        position: absolute
        left: 0
        +flex(center, center)
        width: 100%
        height: 15px
        cursor: pointer
        border: none !important
        background-color: transparent

        .ui-icon
          position: relative
          top: 0
          left: 0
          margin-top: 0
          margin-left: 0
          width: 8px
          height: 4px
          background-image: url("/img/kms/icons/icon_triangle_down_grey.svg")
          background-position: center
          background-size: contain
          transform-origin: center
          opacity: 0
          transition: opacity 0.3s

        &.ui-spinner-up
          top: 0
          .ui-icon
            transform: rotate(180deg)

        &.ui-spinner-down
          bottom: 0

      &:hover
        .ui-spinner-button
          background: rgba($light-gray, 0.08)
          .ui-icon
            opacity: 0.4

          &:hover
            background: rgba($light-gray, 0.14)
            .ui-icon
              opacity: 1


#ui-datepicker-div
  position: fixed
  left: -100vh
  min-width: 285px
  width: 320px
  margin-top: 5px
  padding: 15px
  border: 1px solid $lighter-gray
  border-radius: 4px
  background-color: white
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.15)

  .ui-datepicker-header
    position: relative
    padding: 0
    margin: 0 0 10px
    border-radius: 0
    border: none
    background: none

    .ui-datepicker-prev, .ui-datepicker-next
      position: absolute
      top: 5px
      +flex(center, center)
      width: 25px
      height: 25px
      border: none !important
      border-radius: 100%
      cursor: pointer
      background: transparent
      transition: background-color 0.3s

      &:hover
        background: rgba($light-gray, 0.2)

      &:focus
        outline: 0
        box-shadow: none

      .ui-icon
        position: relative
        left: 0
        top: 4px
        margin-left: 0
        margin-right: 0
        width: 8px
        height: 4px
        transform-origin: center
        background-image: url("/img/kms/icons/icon_triangle_down_grey.svg")
        background-size: contain
        background-position: center

    .ui-datepicker-next
      right: 2px !important
      .ui-icon
        transform: rotate(-90deg)

    .ui-datepicker-prev
      left: 2px !important
      .ui-icon
        left: -2px
        transform: rotate(90deg)

    .ui-datepicker-title
      width: 100%
      margin: 0

      select
        +appearance(none)
        border: none !important
        margin: 0
        padding: 10px 5px
        background-color: transparent
        font-size: 0.8rem
        line-height: 1.2
        font-weight: 400
        color: $brand-secondary
        cursor: pointer

        &:focus
          outline: 0
          box-shadow: none

        &.ui-datepicker-month
          direction: rtl
          width: 48%

        &.ui-datepicker-year
          width: 42%


  table
    width: 100%
    border-spacing: 0
    margin-bottom: 0

    thead
      background-color: rgba($lightest-gray, 0.4)
      border-radius: 4px

      tr
        +flex(space-between, center)

      th
        +flex(center, center)
        padding: 0
        width: 36px
        height: 36px
        font-size: 0.7rem
        line-height: 1
        font-weight: 400
        color: $light-gray

    tbody
      display: block
      margin-top: 5px

      tr
        +flex(space-between, center)

      td
        +flex(center, center)
        padding: 0

        a
          position: relative
          +flex(center, center)
          width: 36px
          height: 36px
          margin: 0
          padding: 0
          text-align: center
          background-color: transparent
          font-size: 0.7rem
          color: $light-gray
          text-decoration: none
          border: none

          &:after
            content: ''
            position: absolute
            z-index: -1
            left: 7.5%
            top: 7.5%
            height: 85%
            width: 85%
            border-radius: 100%
            background-color: transparent
            transition: background-color 0.2s

          &:hover
            &:after
              background-color: rgba($light-gray, 0.1)

        .ui-priority-secondary
          opacity: 0.4

        .ui-state-highlight
          &:after
            background-color: rgba($brand-primary, 0.1)

        .ui-state-active
          color: white
          font-weight: bold
          &:after
            background-color: $brand-primary !important