@import '../../../styles/fonts.scss'
@import '../../../styles/variables.scss'

.ark-ui-calendar-input
  position: relative

  &-wrap
    display: flex
    align-items: center
    position: relative

  &-element
    border-radius: 4px
    border: 1px solid #D3D5E5
    width: 100%
    height: 40px
    padding: 10px 16px
    box-sizing: border-box
    font-size: 14px

    &:focus
      outline: none

  &-icon
    position: absolute
    right: 16px
    top: 50%
    transform: translateY(-50%)
    width: 24px
    height: 24px
    display: block
    border-radius: 2px
    background: transparent
    background-position: center
    background-repeat: no-repeat

    cursor: pointer

    &-calendar
      background-image: url('./../assets/datetime-calendar.svg')
      background-repeat: no-repeat

    &-clear
      cursor: pointer
      background-image: url('./../assets/clear.svg')
      background-repeat: no-repeat
      z-index: $element

      &:hover
        background-image: url('./../assets/clear-hover.svg')

  &-calendar-container
    position: absolute
    background-color: #fff
    margin-top: 4px
    z-index: $dropdown
    box-shadow: 0px 8px 16px 0px rgba(75, 77, 89, 0.08)
    border-radius: 4px

    &-inputs
      display: flex
      align-items: center
      justify-content: space-between
      box-sizing: border-box
      padding: 10px 16px

      input
        width: 75px
        border: none
        outline: none
        display: block
        font-size: 14px

        &[disabled=""]
          background: white

        &:focus
          border-bottom: 1px solid #21C2D1

    &-clear
      cursor: pointer
      background: url('./../assets/clear.svg') center center no-repeat
      width: 16px
      height: 16px
      margin-left: 10px

  &-overlap
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    cursor: pointer
    z-index: $element

  &-error
    font-size: 12px
    color: $error-color
    margin-top: 4px

  &-label
    font-size: 12px
    color: $placeholder-grey
    margin-bottom: 8px

  &.withCopy
    cursor: copy !important

    input
      cursor: copy !important

  &:hover, &:focus
    .ark-ui-calendar-input
      &-element
        border-color: #A3A7B9

  &.invalid
    .ark-ui-calendar-input
      &-element
        border-color: $error-color

  &.disabled
    .ark-ui-calendar-input
      &-element
        border-color: #F6F6FA !important
        background-color: #F6F6FA
        color: #585B69

      &-icon
        display: none

.default-table-header
  .ark-ui-calendar-input
    &-head-placeholder
      min-width: 40px
      margin-right: 13px
      overflow: hidden
      white-space: nowrap
      text-overflow: ellipsis
      color: #585B69
      font-size: 14px
      font-weight: 500
      line-height: 16px

    &-wrap
      &.is-selected
        .ark-ui-calendar-input-icon-calendar
          background-image: url('./../assets/calendar-cyan.svg')
          background-repeat: no-repeat

      &.is-opened
        .ark-ui-calendar-input-icon-calendar
          background-image: url('./../assets/datetime-calendar-dark.svg')
          background-repeat: no-repeat

    &-element
      border: none
      border-radius: 0
      padding: 16px
      background-color: transparent
      font-size: 14px
      font-weight: 500
      color: #585B69

    &-icon
      right: 12px

    &-calendar-container
      margin-top: 0

  &:has(.ark-ui-calendar-input-wrap.is-opened)
    background-color: #F0F1F7

  &:hover
    .ark-ui-calendar-input-icon-calendar
      background-image: url('./../assets/datetime-calendar-dark.svg')
      background-repeat: no-repeat