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

// wraps the entire component
.#{$iot-prefix}--date-time-pickerv2__wrapper {
  width: var(--wrapper-width);
  cursor: pointer;

  &:focus {
    outline: $spacing-01 solid $interactive-03;
  }

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

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

  // the text version of this
  .#{$iot-prefix}--date-time-picker__box--full {
    background-color: $ui-01;
    color: $carbon--gray-100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid $ui-04;
    &::selection {
      color: none;
      background: none;
    }
    max-height: 40px;
    height: 40px;

    // the whole thing should pickup the hover
    &:hover {
      background-color: inherit;
    }

    // hide the shadow around the button for the text version
    .#{$iot-prefix}--flyout-menu__open {
      box-shadow: unset;
    }

    // the button should always inherit the background color
    .#{$iot-prefix}--flyout-menu:not(.#{$iot-prefix}--flyout-menu__light)
      .#{$iot-prefix}--flyout-menu--trigger-button {
      background-color: inherit;
    }

    .#{$iot-prefix}--date-time-picker__field {
      padding-left: $spacing-05;
      overflow: hidden;
      text-overflow: ellipsis;
      & span {
        white-space: nowrap;
      }

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

      &:focus {
        outline: 2px solid $carbon--blue-60;
        border-bottom: none;
      }
      // tooltip has default left outline
      .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip__trigger--definition.#{$prefix}--tooltip--bottom:focus {
        outline: unset;
      }
    }
  }

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

// open menu content
.#{$iot-prefix}--flyout-menu--content.#{$iot-prefix}--date-time-picker--menu {
  padding: 0;

  .#{$iot-prefix}--date-time-picker__menu-scroll {
    overflow-y: auto;
    width: var(--wrapper-width);

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

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

    .#{$iot-prefix}--date-time-picker__custom-wrapper {
      width: var(--wrapper-width);
      padding-top: $spacing-05;
      padding-bottom: $spacing-07;
    }
  }

  .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}--select {
    width: 8.5rem;
  }

  // hide the date picker inputs
  .#{$prefix}--date-picker--range {
    position: absolute;
  }
  .#{$prefix}--date-picker-container {
    opacity: 0;
  }

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

    .#{$prefix}--number__controls {
      // this prevents the number input icons from being pushed to the left
      button.#{$prefix}--number__control-btn {
        padding-right: 0;
      }
    }
  }

  .#{$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 {
      .#{$prefix}--time-picker__input-field {
        width: 8.5rem;
        padding-right: $spacing-07;
      }
    }
    .#{$iot-prefix}--time-picker__controls {
      left: 6.7rem;
    }
  }

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

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

    .#{$prefix}--form-item + .#{$prefix}--form-item {
      margin-left: $spacing-05;
    }
  }

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

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

  .#{$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;
  }
}

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

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

// icon tooltip needs to be moved up a little more
.#{$iot-prefix}--date-time-picker--tooltip--icon.#{$prefix}--tooltip[data-floating-menu-direction='bottom'] {
  margin-top: -0.35rem;
}

// allow the bottom border from the field to become visible (but not in the iconOnly case)
.#{$iot-prefix}--date-time-picker--tooltip {
  &.#{$iot-prefix}--flyout-menu--body.#{$iot-prefix}--flyout-menu--body__bottom-start
    .#{$prefix}--tooltip__content::after,
  &.#{$iot-prefix}--date-time-picker--tooltip.#{$iot-prefix}--flyout-menu--body.#{$iot-prefix}--flyout-menu--body__bottom-end
    .#{$prefix}--tooltip__content::after,
  &.#{$iot-prefix}--date-time-picker--tooltip.#{$iot-prefix}--flyout-menu--body.#{$iot-prefix}--flyout-menu--body__top-start
    .#{$prefix}--tooltip__content::after,
  &.#{$iot-prefix}--date-time-picker--tooltip.#{$iot-prefix}--flyout-menu--body.#{$iot-prefix}--flyout-menu--body__top-end
    .#{$prefix}--tooltip__content::after {
    background-color: unset;
  }
}

html[dir='rtl'] {
  .#{$iot-prefix}--flyout-menu--content.#{$iot-prefix}--date-time-picker--menu {
    .#{$iot-prefix}--date-time-picker__fields-wrapper {
      .#{$prefix}--form-item + .#{$prefix}--form-item,
      .#{$prefix}--form-item + .#{$iot-prefix}--time-picker__wrapper {
        margin-right: $spacing-05;
        margin-left: unset;
      }
    }

    // this should be global to all number controls RtL
    .#{$prefix}--number {
      .#{$prefix}--number__input-wrapper {
        input {
          min-width: 8.5rem;
          padding-right: $spacing-05;
        }
      }

      .#{$prefix}--number__controls {
        right: unset;
        left: 0;
      }
    }

    .#{$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__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}--card--toolbar .#{$iot-prefix}--date-time-pickerv2__wrapper:focus {
  outline: none;
}