@import '~styles/mixins';

.DateTimePicker {
  :global .picker {
    width: 100%;

    th,
    td {
      vertical-align: middle !important;
    }

    .rdtPicker td.rdtActive {
      background-color: $color_primary;
      color: white;
    }
  }

  &.disabled {
    cursor: not-allowed;
  }

  .value {
    display: flex;
    &.value-with-timezone {
      padding-right: 0;
    }
  }

  .input {
    position: relative;
    min-height: $input_min_height;
    display: flex;
    align-items: center;

    &.with-value-border {
      min-height: $input_with_value_border_min_height - 2 * $form_element_padding_v;
    }
  }

  .placeholder {
    opacity: $select_opacity_placeholder;
  }

  .cancel {
    opacity: 0.7;
    cursor: pointer;
    font-size: 12px;
    @include v_align;
    right: 0;
  }

  .timezone {
    border-left: 1px solid $color_border;
    margin-left: 5px;
    min-width: 200px;
  }

  .timezone-select {
    margin-top: 0;
    fieldset {
      display: none;
    }
    .timezone-select-wrapper {
      border: none;
      margin-top: 0;
      padding: 0 !important;
    }
    .timezone-select-field {
      border: none;
    }
  }
}
