@import '../../globals/vars';
@import '../../vendor/@carbon/motion/scss/motion.scss';

.#{$iot-prefix}--date-time-picker {
  padding: 0 $spacing-05 $spacing-05;
  position: absolute;
  width: 100%;
  height: 100%;
}

.#{$iot-prefix}--date-time-picker__wrapper {
  width: 20rem;

  .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition {
    font-size: 100%;
    border-bottom: none;
    letter-spacing: unset;
  }

  .#{$prefix}--date-picker--range {
    position: absolute;
  }

  .#{$prefix}--date-picker-container {
    opacity: 0;
  }

  .flatpickr-calendar.open {
    padding-bottom: 0;
    position: unset !important;
    top: unset !important;
    left: unset !important;
    box-shadow: none;
    margin-left: auto;
    margin-right: auto;
    -webkit-animation: none;
    animation: none;
  }

  .#{$prefix}--number {
    .#{$prefix}--number__input-wrapper {
      input {
        min-width: 8.5rem;
        padding-right: $spacing-03;
      }
    }
  }

  .#{$prefix}--select-input {
    width: 8.5rem;
  }

  .#{$iot-prefix}--time-picker__wrapper {
    &.#{$iot-prefix}--time-picker__wrapper--with-spinner:first-of-type {
      margin-right: $spacing-05;
    }
    &.#{$iot-prefix}--time-picker__wrapper--with-spinner {
      .bx--time-picker__input-field {
        width: 8.5rem;
        padding-right: $spacing-07;
      }
    }
    .#{$iot-prefix}--time-picker__controls {
      left: 6.7rem;
    }
  }

  .#{$iot-prefix}--date-time-picker__box {
    outline-offset: -0.125rem;
    position: relative;
    list-style: none;
    display: block;
    background-color: $ui-01;
    border: none;
    width: 100%;
    height: $spacing-08;
    cursor: pointer;
    color: $carbon--gray-100;
    outline: 0.125rem solid transparent;
    transition: background-color $duration--fast-01 carbon--motion(standard);

    .#{$iot-prefix}--date-time-picker__field {
      background: none;
      appearance: none;
      border: 0;
      width: 100%;
      position: relative;
      display: inline-flex;
      align-items: center;
      vertical-align: top;
      height: calc(100% + 1px);
      padding: 0 $spacing-09 0 $spacing-05;
      cursor: pointer;
      outline: none;
      white-space: nowrap;
      border-bottom: 1px solid $carbon--gray-50;

      & > span {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      &:hover {
        background-color: $hover-ui;
      }

      &:focus {
        outline: 2px solid $carbon--blue-60;
        border-bottom: none;
      }

      .#{$iot-prefix}--date-time-picker__icon {
        position: absolute;
        top: 0;
        right: $spacing-05;
        bottom: 0;
        height: 100%;
        transition: transform $duration--fast-01 carbon--motion(standard);
        cursor: pointer;
      }

      .#{$iot-prefix}--date-time-picker__tooltip-trigger {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        pointer-events: none;
      }
    }

    .#{$iot-prefix}--date-time-picker__menu {
      display: none;
      cursor: default;
      box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1);
      position: absolute;
      left: 0;
      right: 0;
      width: 100%;
      background-color: $carbon--white-0;
      z-index: 9100;
      &.#{$iot-prefix}--date-time-picker__menu-expanded {
        display: block;
      }

      .#{$iot-prefix}--date-time-picker__menu-scroll {
        overflow-y: auto;

        .#{$prefix}--fieldset {
          margin-bottom: $spacing-lg;
          padding: 0 $spacing-baseline;

          &:last-child {
            margin-bottom: 0;
          }
        }

        .#{$iot-prefix}--date-time-picker__custom-wrapper {
          padding-top: 1rem;
          padding-bottom: 2rem;

          .#{$prefix}--radio-button-wrapper:not(:last-of-type) {
            margin-right: $spacing-06;
          }
        }

        .#{$iot-prefix}--date-time-picker__fields-wrapper {
          display: flex;
          align-items: flex-start;

          &--with-gap {
            gap: $spacing-05;
          }

          .#{$prefix}--label {
            margin-bottom: 0;
          }

          &--without-time {
            .#{$prefix}--select-input__wrapper {
              flex: 0.5;
              width: auto;
            }
          }
        }

        .#{$iot-prefix}--date-time-picker__no-formgroup {
          margin-bottom: $spacing-05;
        }

        &.#{$iot-prefix}--date-time-picker__menu-formgroup {
          display: block;
          padding-top: 1rem;
        }

        .#{$iot-prefix}--date-time-picker__listitem {
          padding: $spacing-04 $spacing-baseline;
          cursor: pointer;
          border-left: 4px solid transparent;
          border-bottom: 1px solid $ui-03;
        }

        .#{$iot-prefix}--date-time-picker__listitem--preset {
          &:hover,
          &:focus {
            background-color: $hover-ui;
          }

          &.#{$iot-prefix}--date-time-picker__listitem--preset-selected {
            background-color: $carbon--gray-20;
            border-left-color: $carbon--blue-60;
          }
        }

        .#{$iot-prefix}--date-time-picker__listitem--current {
          color: $carbon--gray-60;
          cursor: default;
        }

        .#{$iot-prefix}--date-time-picker__listitem--custom {
          color: $carbon--blue-60;

          &:hover,
          &:focus {
            background-color: $hover-ui;
          }
        }
      }

      .#{$iot-prefix}--date-time-picker__menu-btn-set {
        display: flex;

        .#{$iot-prefix}--date-time-picker__menu-btn {
          flex-grow: 1;
        }
      }
    }
  }

  .#{$iot-prefix}--date-time-picker__box--light {
    background-color: $field-02;
  }
}

html[dir='rtl'] {
  .#{$iot-prefix}--date-time-picker__wrapper {
    .#{$prefix}--number {
      margin-right: unset;
      margin-left: $spacing-05;
    }

    .#{$iot-prefix}--time-picker__wrapper {
      &.#{$iot-prefix}--time-picker__wrapper--with-spinner:first-of-type {
        margin-right: unset;
        margin-left: $spacing-05;
      }
    }

    .#{$iot-prefix}--date-time-picker__box {
      .#{$iot-prefix}--date-time-picker__field {
        padding-right: $spacing-05;
        padding-left: $spacing-09;
        .#{$iot-prefix}--date-time-picker__icon {
          right: unset;
          left: $spacing-05;
        }
      }
      .#{$iot-prefix}--date-time-picker__menu {
        .#{$iot-prefix}--date-time-picker__menu-scroll {
          .#{$iot-prefix}--date-time-picker__listitem {
            border-right: 2px solid transparent;
            border-left: none;
          }

          .#{$iot-prefix}--date-time-picker__listitem--preset {
            &.#{$iot-prefix}--date-time-picker__listitem--preset-selected {
              border-right-color: $carbon--blue-60;
            }
          }
        }
      }
    }
  }
}

.#{$iot-prefix}--date-time-picker__tooltip {
  padding: $spacing-02 $spacing-05;
}