// Copyright (c) 2014, 2023, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// WARNING: do not directly import this file, instead import the
//          version in your base theme's directory,
//          for example alta/widgets/_oj.alta.formcontrol.inputdatetime.scss
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

@import "../../utilities/oj.utilities";
@import "oj.common.formcontrol.mixins";

@if $includeInputDateTimeClasses != false {
  @include module-include-once("common.inputdatetime") {

    // This is to prevent the flash of unstyled content before the html becomes JET components.
    @if $initialVisibility == hidden {
      oj-input-time:not(.oj-complete) {
        visibility: hidden;
      }
    }

    // This is to prevent the flash of unstyled content before the html becomes JET components.
    @if $initialVisibility == hidden {
      oj-input-date:not(.oj-complete) {
        visibility: hidden;
      }
    }

    // This is to prevent the flash of unstyled content before the html becomes JET components.
    @if $initialVisibility == hidden {
      oj-input-date-time:not(.oj-complete) {
        visibility: hidden;
      }
    }

    // This is to prevent the flash of unstyled content before the html becomes JET components.
    @if $initialVisibility == hidden {
      oj-date-picker:not(.oj-complete) {
        visibility: hidden;
      }
    }

    // This is to prevent the flash of unstyled content before the html becomes JET components.
    @if $initialVisibility == hidden {
      oj-calendar:not(.oj-complete) {
        visibility: hidden;
      }
    }

    .oj-inputdatetime, // added to root for ojInputDateTime, ojInputDate, and ojInputTime
    .oj-inputdatetime-date-time, // added to root for ojInputDateTime
    .oj-inputdatetime-date-only, // added to root for ojInputDate
    .oj-inputdatetime-time-only {  // added to root for ojInputTime

        // font size needs to be on the root, because max/min width is in em.
        font-size: $formControlTriggerFontSize;
        @include oj-form-control-text-size-adjust($formControlTriggerFontSize);      

      position: relative;
    }

    //we still need these styles on inline components as they are not text fiedls
    .oj-inputdatetime-inline {
        display: inline-block; 
        max-width: 277px;  
    }
    
    // .oj-form-control-full-width is an override to set max-width to 100% if on the
    // element or an ancestor element
    .oj-form-control-full-width.oj-inputdatetime,
    .oj-form-control-full-width.oj-inputdatetime-date-time,
    .oj-form-control-full-width.oj-inputdatetime-date-only,
    .oj-form-control-full-width.oj-inputdatetime-time-only,
    .oj-form-control-full-width .oj-inputdatetime,
    .oj-form-control-full-width .oj-inputdatetime-date-time,
    .oj-form-control-full-width .oj-inputdatetime-date-only,
    .oj-form-control-full-width .oj-inputdatetime-time-only {
      max-width: 100%;
    }

    //added to inner container for oj-date-picker and oj-date-time-picker, since div need to restrict the size due to
    //messaging
    .oj-datepicker-inline {
      /* use a width of 100% and then max and min width so that when
         there's less room for the form control it can automatically
         get smaller instead of overflowing its boundaries */


        max-width: calc(#{$dateTimePickerWidth} + 2px); // need to account for the border
        min-width: $formControlMinWidth;        

      width: 100%;
    }

    // Class that wraps the input element and trigger icons. Need a separate one due to inline mode.
    .oj-inputdatetime-input-container {
      box-sizing: border-box;
      // use inline-flex properties. This will grow the input and the buttons will take up
      // the remaining width
      display: inline-flex;
      width: 100%;
    }
	.oj-inputdatetime-input-container:focus {
      outline: none;
    } 

    //actual input element
    .oj-inputdatetime-input {


        @include oj-form-control-content($formControlTriggerValueColor);
        padding: 0 $formControlPaddingHorizontal; 
        
        @include oj-ltr() { 
          //need to disable right border if trigger exists
          border-width: oj-shorthand-property-value-top($formControlBorderWidth) 0  oj-shorthand-property-value-bottom($formControlBorderWidth)  oj-shorthand-property-value-left($formControlBorderWidth); 
          @include oj-border-radius($formControlBorderRadius 0 0 $formControlBorderRadius, $slowOverride: false);
        }
  
        @include oj-rtl() { 
          //need to disable left border if trigger exists
          border-width: oj-shorthand-property-value-top($formControlBorderWidth)  oj-shorthand-property-value-right($formControlBorderWidth)  oj-shorthand-property-value-bottom($formControlBorderWidth) 0;
          @include oj-border-radius(0 $formControlBorderRadius $formControlBorderRadius 0,
          $slowOverride: false); 
        }
  
        @include oj-border-radius-slowoverride();

      // grow the input using the flex property
      flex: 1;
      // needed for the input to be able to shrink smaller than the browser
      // default width.  Because this has flex-grow of 1, it will always grow
      // to the available space of the parent container, which is what we want.
      width: 1em;
      // needed or else the input could overflow the container
      min-width: 1em;
      font-weight: normal;
    }
    .oj-inputdatetime.oj-text-field .oj-text-field-container {
      // This component uses trigger height instead of the default input height.
      height: $formControlTriggerHeight;
    }

    // override when label value wrapper is present
    .oj-text-field-middle .oj-inputdatetime-input{
      width: 100%;
      flex: none;
    }

    //Trigger contains the calendar-icon + time-icon
    .oj-inputdatetime-input-trigger {
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      border-style: solid;


        border-color: $formControlBorderColor;
        background-color: $formControlBgColor;
        height: $formControlTriggerHeight;
        line-height: $formControlTriggerHeight;  
        
        //since need to make it look like input and the trigger are of a single input, need to disable one side of 
        //input and one side of the trigger
  
        @include oj-ltr() {
          //disable left border
          border-width: oj-shorthand-property-value-top($formControlBorderWidth)  oj-shorthand-property-value-right($formControlBorderWidth)  oj-shorthand-property-value-bottom($formControlBorderWidth) 0;; 
          @include oj-border-radius(0 $formControlBorderRadius $formControlBorderRadius 0,
          $slowOverride: false);
        }
  
        @include oj-rtl() {
          border-width: oj-shorthand-property-value-top($formControlBorderWidth) 0  oj-shorthand-property-value-bottom($formControlBorderWidth)  oj-shorthand-property-value-left($formControlBorderWidth);
          @include oj-border-radius($formControlBorderRadius 0 0 $formControlBorderRadius,
          $slowOverride: false);
        }
  
        @include oj-border-radius-slowoverride();      

      text-align: center;
      vertical-align: middle;
      white-space: nowrap;

      // normally removing an outline can cause accessibility issues, however
      // on an input the cursor blinks so an outline is not required for
      // accessibility. As of 6-11-14 only chrome is putting
      // an outline on inputs anyway
      outline: 0;
    }

    //oj-warning border color
    .oj-inputdatetime.oj-warning .oj-inputdatetime-input-trigger {

        border-color: $borderColorWarning;

    }

    // color in focus state
    .oj-inputdatetime:not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-inputdatetime-input {


        border-color: $formControlInputBorderColorFocus;
        @include oj-ltr() { 
          border-width: oj-shorthand-property-value-top($formControlInputBorderWidthFocus) 0  oj-shorthand-property-value-bottom($formControlInputBorderWidthFocus)  oj-shorthand-property-value-left($formControlInputBorderWidthFocus); 
        }
  
        @include oj-rtl() { 
          border-width: oj-shorthand-property-value-top($formControlInputBorderWidthFocus)  oj-shorthand-property-value-right($formControlInputBorderWidthFocus)  oj-shorthand-property-value-bottom($formControlInputBorderWidthFocus) 0;
        }

    }
    .oj-inputdatetime:not(.oj-read-only):not(.oj-invalid):not(.oj-warning).oj-focus .oj-inputdatetime-input-trigger {

        border-color: $formControlInputBorderColorFocus;
        @include oj-ltr() { 
          border-width: oj-shorthand-property-value-top($formControlInputBorderWidthFocus)  oj-shorthand-property-value-right($formControlInputBorderWidthFocus)  oj-shorthand-property-value-bottom($formControlInputBorderWidthFocus) 0;
        }
  
        @include oj-rtl() { 
          border-width: oj-shorthand-property-value-top($formControlInputBorderWidthFocus) 0  oj-shorthand-property-value-bottom($formControlInputBorderWidthFocus)  oj-shorthand-property-value-left($formControlInputBorderWidthFocus); 
        }

    }


    @if ( $inputDateTimeKeyboardEditOptionDefault == disabled) {
      .oj-inputdatetime:not(.oj-read-only):not(.oj-inputdatetime-inline).oj-focus-highlight {


          @include oj-browser-focus-outline-approximation($primaryTextColor);

      }
    }

    //oj-invalid border color
    .oj-inputdatetime.oj-invalid .oj-inputdatetime-input-trigger {

        border-color: $borderColorError;        

    }

    //oj-invalid and warning border width
    .oj-inputdatetime.oj-invalid .oj-inputdatetime-input,
    .oj-inputdatetime.oj-warning .oj-inputdatetime-input {

        $borderErrorWidth: oj-form-control-border-message-width-func();
        @include oj-ltr() {
  
          border-width: oj-shorthand-property-value-top($borderErrorWidth) 0 
            oj-shorthand-property-value-bottom($borderErrorWidth)  
            oj-shorthand-property-value-left($borderErrorWidth);
        }
  
        @include oj-rtl() {
          border-width: oj-shorthand-property-value-top($borderErrorWidth)
            oj-shorthand-property-value-left($borderErrorWidth) 
            oj-shorthand-property-value-bottom($borderErrorWidth)  0;
        }
        // We don't want to mess with the border-radius if the error border is on all four sides. 
        // Otherwise, set the border-radius to 0 to show a straight border.
        @if(not(oj-form-control-message-border-four-sides($borderErrorWidth)) and 
        $formControlBorderRadius != 0) {
          @include oj-border-radius(0);
        }        

    }

    .oj-inputdatetime.oj-invalid .oj-inputdatetime-input-trigger,
    .oj-inputdatetime.oj-warning .oj-inputdatetime-input-trigger {

        $borderErrorWidth: oj-form-control-border-message-width-func();
        @include oj-ltr() {
          border-width: oj-shorthand-property-value-top($borderErrorWidth)  
            oj-shorthand-property-value-right($borderErrorWidth) 
            oj-shorthand-property-value-bottom($borderErrorWidth) 0;
        }
  
        @include oj-rtl() {
          border-width: oj-shorthand-property-value-top($borderErrorWidth)  0 
            oj-shorthand-property-value-bottom($borderErrorWidth)
            oj-shorthand-property-value-right($borderErrorWidth);
        }
        // We don't want to mess with the border-radius if the error border is on all four sides. 
        // Otherwise, set the border-radius to 0 to show a straight border.
        @if(not(oj-form-control-message-border-four-sides($borderErrorWidth)) and 
        $formControlBorderRadius != 0) {
          @include oj-border-radius(0);
        }        

    }

    // background color for input and trigger nodes change on active state
    .oj-inputdatetime.oj-active .oj-inputdatetime-input-trigger,
    .oj-inputdatetime.oj-active .oj-inputdatetime-input {

        background-color: $formControlTriggerBgColorActive;        

    }


    //oj-disabled
    .oj-inputdatetime.oj-disabled .oj-inputdatetime-input {

        @include oj-form-control-content-disabled;        

    }

    // Styling for loading converters
    .oj-inputdatetime.oj-loading .oj-inputdatetime-input-container,
    .oj-inputdatetime-date-only.oj-loading .oj-datepicker-popup {

        background-image: $loadingBgImage;
        animation: LoadingGradientAnimation 3s infinite; 

      background-size: 200% 200%;
    }

    .oj-inputdatetime.oj-loading .oj-inputdatetime-input,
    .oj-inputdatetime-date-only.oj-loading .oj-datepicker-inline .oj-datepicker-content {
      background-color: transparent;
    }

    .oj-inputdatetime.oj-disabled .oj-inputdatetime-input-trigger {

        background-color: $formControlBgColorDisabled;
        border-color: $formControlBorderColorDisabled;
        opacity: $formControlOpacityDisabled;        

    }

    // Hide when is of read-only
    .oj-inputdatetime.oj-read-only .oj-inputdatetime-input-trigger {
      display: none;
    }

    .oj-inputdatetime-calendar-clock-icon,
    .oj-inputdatetime-calendar-icon,
    .oj-inputdatetime-time-icon {
      cursor: pointer;
      padding: 0 5px;
      vertical-align: middle;
      line-height: inherit;
    }
    .oj-inputdatetime-calendar-icon {
      @extend .oj-fwk-icon-calendar;
    }

    .oj-inputdatetime-calendar-clock-icon {
      @extend .oj-fwk-icon-calendar-clock;
    }

    .oj-inputdatetime-calendar-clock-icon.oj-disabled,
    .oj-inputdatetime-calendar-icon.oj-disabled,
    .oj-inputdatetime-time-icon.oj-disabled {

        background-color: $formControlBgColorDisabled;

      cursor: default;
    }

    .oj-inputdatetime-time-icon {
      @extend .oj-fwk-icon-clock
    }

    .oj-datepicker-prev-icon {
      @include oj-ltr() {
        @extend .oj-fwk-icon-caret-w;
      }

      @include oj-rtl() {
        @extend .oj-fwk-icon-caret-e;
      }
    }

    .oj-datepicker-next-icon {
      @include oj-ltr() {
        @extend .oj-fwk-icon-caret-e;
      }

      @include oj-rtl() {
        @extend .oj-fwk-icon-caret-w;
      }
    }


    //**************************
    // PICKER
    //**************************

    //'oj-datepicker-popup' is the class for the root of the ojPopup that
    //  contains the calendar. Remove the padding around the popup.
    .oj-datepicker-popup .oj-popup-content {
      padding: 0;
    }

    // wrapper to facilitate animation
    .oj-datepicker-wrapper {

        padding-bottom: $dateTimePickerPadding;        

    }

    /* Class for the root node that contains the floating calendar */
    .oj-datepicker-content {
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
      @include oj-rtl() {
        direction: rtl;
      }
    }

    .oj-datepicker-header {

        margin: $dateTimePickerPadding $dateTimePickerPadding 0;
        color: $headerTextColor;        

      position: relative; 
      background: none;
      border: 0;
    }
    .oj-datepicker-prev-icon,
    .oj-datepicker-next-icon {
      position: absolute; 

        line-height: calc((#{$dateTimePickerWidth} - 2 * #{$dateTimePickerPadding}) / 7);        

    }

    //positioned absolutely so need to include it. Thought about making code change, but it is rather impactful
    .oj-datepicker-prev-icon {
      @include oj-ltr() {
        left: 2px;
      }
      @include oj-rtl() {
        right: 2px;
      }
    }
    .oj-datepicker-next-icon {
      @include oj-ltr() {
        right: 2px;
      }
      @include oj-rtl() {
        left: 2px;
      }
    }

    .oj-datepicker-title {
      //decreased the margin slightly for chrome on mac
      margin: 0 2.2em; 

        height: calc((#{$dateTimePickerWidth} - 2 * #{$dateTimePickerPadding}) / 7);
        line-height: calc((#{$dateTimePickerWidth} - 2 * #{$dateTimePickerPadding}) / 7);         

      text-align: center;
    }

    .oj-datepicker-title select { 

        font-size: $fontSize;

      margin: 1px 0;
      background-color: inherit;
      color: inherit
    }

    .oj-datepicker-header a.oj-enabled,
    .oj-datepicker-buttonpane a.oj-enabled {
      text-decoration: none;

        color: $datepickerButtonTextColor;        

    }

    .oj-datepicker-header a.oj-enabled.oj-hover,
    .oj-datepicker-buttonpane a.oj-enabled.oj-hover {

        color: $datepickerButtonTextColorHover;        

    }

    .oj-datepicker-header a.oj-enabled.oj-active,
    .oj-datepicker-buttonpane a.oj-enabled.oj-active {

        color: $datepickerButtonTextColorActive;        

    }

    .oj-datepicker-month-year {
      width: 100%;
    }

    .oj-datepicker-month {
      margin-right: 20px;
    }

    .oj-datepicker-month,
    .oj-datepicker-year {
      font-size: 18px;
      width: 48%;
      min-width: 0;
    }

    .oj-datepicker-calendar {
      border-collapse: collapse;

        height: calc(#{$dateTimePickerWidth} - 2 * #{$dateTimePickerPadding});
        margin: 0 $dateTimePickerPadding;        

      outline: 0 none;
    }

    .oj-datepicker-calendar th,
    .oj-datepicker-calendar td {
      border: 0;
      text-align: center;
    }

    .oj-datepicker-calendar th {
      padding: 0;

        height: calc((#{$dateTimePickerWidth} - 2 * #{$dateTimePickerPadding}) / 7);
        color: $datepickerHeaderTextColor;

      text-transform: uppercase;
      font-weight: normal;
    }

    .oj-datepicker-calendar td {
      padding: 0;
    }

    .oj-datepicker-calendar td span,
    .oj-datepicker-calendar td a {
      display: block;
      padding: 0;
      border-radius: 50%;
      box-sizing: border-box;

        width: calc((#{$dateTimePickerWidth} - 2 * #{$dateTimePickerPadding}) / 7);
        height: calc((#{$dateTimePickerWidth} - 2 * #{$dateTimePickerPadding}) / 7);
        line-height: calc((#{$dateTimePickerWidth} - 2 * #{$dateTimePickerPadding}) / 7 - 4px);        

      text-align: center;
    }

    .oj-datepicker-calendar.oj-datepicker-weekdisplay td span,
    .oj-datepicker-calendar.oj-datepicker-weekdisplay td a {

        width: calc((#{$dateTimePickerWidth} - 2 * #{$dateTimePickerPadding}) / 8);
        height: calc((#{$dateTimePickerWidth} - 2 * #{$dateTimePickerPadding}) / 8);
        line-height: calc((#{$dateTimePickerWidth} - 2 * #{$dateTimePickerPadding}) / 8 - 4px);        

    }

    .oj-datepicker-calendar.oj-datepicker-monthview,
    .oj-datepicker-calendar.oj-datepicker-yearview {

        /* Take up space on right and bottom to make it same size as day view */
        margin-right: calc(#{$dateTimePickerPadding} + 12px);
        margin-left: calc(#{$dateTimePickerPadding} + 11px);

      margin-bottom: 0px;        
    }

    .oj-datepicker-calendar.oj-datepicker-monthview td,
    .oj-datepicker-calendar.oj-datepicker-yearview td {
      padding: 8px 3px 3px 4px;
    }

    .oj-datepicker-calendar.oj-datepicker-monthview td span,
    .oj-datepicker-calendar.oj-datepicker-monthview td a,
    .oj-datepicker-calendar.oj-datepicker-yearview td span,
    .oj-datepicker-calendar.oj-datepicker-yearview td a {
      width: 49px;
      height: 49px;
      line-height: 45px;
      white-space: nowrap;
    }

    .oj-datepicker-calendar td a:focus {
      outline: none;
    }

    .oj-datepicker-calendar td a.oj-enabled {
      border: 2px solid transparent;

        color: $textColor;        

      text-decoration: none;
    }
    .oj-datepicker-calendar td.oj-datepicker-today a.oj-hover,
    .oj-datepicker-calendar td a.oj-hover {

        background-color: $datepickerBgColorHover;
        color: $datepickerTextColorHover;        

    }
    .oj-datepicker-calendar td.oj-datepicker-today a.oj-selected,
    .oj-datepicker-calendar td a.oj-selected {
      font-weight: bold;

        background: $datepickerBgColorSelected; 
        color: $datepickerTextColorSelected;         

    }

    .oj-datepicker-calendar td.oj-disabled {

        opacity: $opacityDisabled;

    }

    .oj-datepicker-calendar td.oj-disabled span {

        color: $linkTextColorDisabled;        

    }
    .oj-datepicker-calendar td.oj-datepicker-other-month a.oj-enabled {

        color: $tertiaryTextColor;

    }

    //Today
     .oj-datepicker-calendar td.oj-datepicker-today a {

         background-color: $datepickerBgColorToday;
         border: 2px solid $datepickerBorderColorToday;         

    }

    .oj-datepicker-buttonpane {
      box-sizing: border-box;


        height: calc((#{$dateTimePickerWidth} - 2 * #{$dateTimePickerPadding}) / 7);
        line-height: calc((#{$dateTimePickerWidth} - 2 * #{$dateTimePickerPadding}) / 7);

      font-size: 18px;
      text-align: center;

      display: inline-block;
      width: 100%;
      @include oj-rtl() {
        clear: right;
      }
    }
    .oj-datepicker-buttonpane a {
      width: auto;
      overflow: visible;
    }

    //request from UX is that we center the button if there is only a single one
    .oj-datepicker-buttonpane .oj-datepicker-single-button {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    .oj-datepicker-current {
    }

    /* with multiple calendars, need to override the width */
    .oj-datepicker-content.oj-datepicker-multi {
      width: auto;
    }
    .oj-datepicker-group {
      box-sizing: border-box;
    }
    .oj-datepicker-multi .oj-datepicker-group {

        @include oj-bidi-property($property: 'float', $startOrEnd: start);

    }
    .oj-datepicker-multi-2 .oj-datepicker-group {
      width: 50%;
    }
    .oj-datepicker-multi-3 .oj-datepicker-group {
      width: 33.3%;
    }
    .oj-datepicker-multi-4 .oj-datepicker-group {
      width: 25%;
    }
    .oj-datepicker-multi .oj-datepicker-group-last .oj-datepicker-header,
    .oj-datepicker-multi .oj-datepicker-group-middle .oj-datepicker-header {
      @include oj-ltr() {
        border-left-width: 0;
      }
      @include oj-rtl() {
        border-right-width: 0;
      }
    }
    .oj-datepicker-multi .oj-datepicker-buttonpane {
      clear: left;
    }
    .oj-datepicker-row-break {
      clear: both;
      width: 100%;
      font-size: 0;
    }

    .oj-datepicker-unselectable {
      opacity: 0.35;
    }

    //CSS when one navigates over the days
    .oj-datepicker-calendar.oj-focus-highlight td.oj-datepicker-days-cell-over a,
    .oj-datepicker-calendar.oj-focus-highlight td.oj-datepicker-days-cell-over span {

        border: 2px solid $datepickerBorderColorFocus;

    }

    //CSS for the week columns
    .oj-datepicker-week-col {

        color: $formControlLabelColor;
        width: calc((#{$dateTimePickerWidth} - 2 * #{$dateTimePickerPadding}) / 8);        

    }
    th.oj-datepicker-week-col {

        background-color: $datepickerWeekOfYearHeaderBgColor;

    }
    td.oj-datepicker-week-col {

        background-color: $datepickerWeekOfYearCellBgColor;

    }

    //CSS to be applied when of inline, so to allow separation with the time picker
    .oj-datepicker-inline {
      margin-bottom: 6px;
    }

    // datepicker-inline lays out the datepicker and then the time picker.
    // the root dom node has oj-form-control on it, and also the time-picker has oj-form-control
    // on it. So it has double the margin-bottom. Override it for the timepicker.
    html .oj-inputdatetime-inline .oj-inputdatetime-time-only {
      margin-bottom: 0;
    }

    .oj-datetimepicker-switcher {

        background-color: $dateTimePickerSwitcherBgColor;
        border-radius: 0 0 $popupBorderRadius $popupBorderRadius;
        padding: $dateTimePickerSwitcherPadding;

      margin-top: 10px;

      display: flex;
      justify-content: space-between;
    }
    .oj-datetimepicker-switcher a.oj-enabled {
      display: inline-block;

        color: $datepickerButtonTextColor;

      text-decoration: none;
      vertical-align: middle;
    }
    .oj-datetimepicker-switcher a.oj-enabled.oj-hover {

        color: $datepickerButtonTextColorHover;

    }
    .oj-datetimepicker-switcher a.oj-enabled.oj-active {

        color: $datepickerButtonTextColorActive;

    }

    .oj-datetimepicker-switcher .oj-inputdatetime-calendar-icon,
    .oj-datetimepicker-switcher .oj-inputdatetime-time-icon {
      @include oj-ltr() {
        padding-left: 0;
      }
      @include oj-rtl() {
        padding-right: 0;
      }
    }

    .oj-datetimepicker-switcher-buttons a:first-child {
      @include oj-ltr() {
        padding-right: 20px;
      }
      @include oj-rtl() {
        padding-left: 20px;
      }
    }

    .oj-datepicker-inline .oj-datepicker-content {

        background-color: $panelBgColor;
        border: 1px solid $panelBorderColor;

    }

    //**************************
    // WHEEL TIME PICKER
    //**************************

    .oj-timepicker-popup .oj-popup-content {
      padding: 0;
    }

    .oj-timepicker-content {

        height: calc((#{$dateTimePickerWidth} - 2 * #{$dateTimePickerPadding}) * 9 / 7 + #{$dateTimePickerPadding});
        padding: $dateTimePickerPadding;
        min-width: $dateTimePickerWidth;

      position: relative;
      box-sizing: border-box;
    }
    // common to timepicker header and footer
    .oj-timepicker-header,
    .oj-timepicker-footer {

        color: $timepickerTextColor;        

      font-size: 18px;
      height: 35px;
      line-height: 35px;
      background: none;
      border: 0;
    }

    .oj-timepicker-header {
      position: relative;
    }

    .oj-timepicker-cancel-button {
      position: absolute;
      @include oj-ltr() {
        left: 0;
      }
      @include oj-rtl() {
        right: 0;
      }
    }

    .oj-timepicker-ok-button {
      position: absolute;
      @include oj-ltr() {
        right: 0;
      }
      @include oj-rtl() {
        left: 0;
      }
    }

    .oj-timepicker-footer {
      box-sizing: border-box;
      text-align: center;
      display: inline-block;
      width: 100%;
    }

    .oj-timepicker-header a.oj-enabled,
    .oj-timepicker-footer a.oj-enabled {
      text-decoration: none;

        color: $timepickerTextColor;        

    }

    .oj-timepicker-header a.oj-enabled.oj-hover,
    .oj-timepicker-footer a.oj-enabled.oj-hover {

        color: $timepickerTextColorHover;

    }

    .oj-timepicker-header a.oj-enabled.oj-active,
    .oj-timepicker-footer a.oj-enabled.oj-active {

        color: $timepickerTextColorActive;

    }

    .oj-timepicker-wheel-group {
      display: flex;
      justify-content: center;
      width: 100%;

        padding: $dateTimePickerPadding 0;

    }

    .oj-timepicker-wheel {
      position: relative;
      height: 215px;
      width: 79px;
      overflow: hidden;
      box-sizing: border-box;
      outline: 0;
    }

    .oj-timepicker-wheel.oj-timepicker-minute,
    .oj-timepicker-wheel.oj-timepicker-meridian {
      margin-left: 4px;
    }

    .oj-timepicker-wheel-item {
      transition: all 0.15s;
      top: -100px;
      position: absolute;
      opacity: 0;
      width: 79px;
      text-align: center;

        color: $timepickerTextColor;        

      display: flex;
      align-items: center;
      justify-content: center;
    }

    .oj-timepicker-wheel-item.oj-disabled {

        color: $linkTextColorDisabled;        

    }

    .oj-timepicker-wheel-item-content {
      text-align: center;
      white-space: nowrap;
    }

    .oj-timepicker-wheel.oj-focus .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position0 {

        @include oj-border-radius($formControlBorderRadius);
        background-color: $timepickerItemBgColorFocus;
        color: $primaryTextColor;        
      
    }

    .oj-timepicker-wheel.oj-active .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position1,
    .oj-timepicker-wheel.oj-active .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position2,
    .oj-timepicker-wheel.oj-active .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-1,
    .oj-timepicker-wheel.oj-active .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-2 {
      opacity: 1;
    }

    .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position0 {
      font-size: 46px;
      height: 54px;
      top: 78px;
      opacity: 1;
    }

    // common to wheel items position1 and position-1
    .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position1,
    .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-1 {
      font-size: 34px;
      height: 40px;
    }

    // common to wheel items position2 and position-2
    .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position2,
    .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-2 {
      font-size: 24px;
      height: 30px;
    }

    // common to wheel items: position 3, 4, 5, 6, 7
    // and position -3, -4, -5, -6, -7
    .oj-timepicker-wheel-item
    {
      height: 20px;
    }

    // Reduced font size for meridian wheel on some languages

    .oj-timepicker-meridian .oj-timepicker-wheel-item-content {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position1 {
      top: 136px;
    }

    .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position2 {
      top: 180px;
    }

    .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position3,
    .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position4,
    .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position5,
    .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position6,
    .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position7 {
      top: 214px;
      visibility: hidden;
    }

    .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-1 {
      top: 34px;
    }

    .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-2 {
      top: 0;
    }

    .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-3,
    .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-4,
    .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-5,
    .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-6,
    .oj-timepicker-wheel-item.oj-timepicker-wheel-item-position-7
    {
      top: -24px;
      visibility: hidden;
    }


    // The oj-form-control-inherit selector on an ancestor indicates that the form control should
    // inherit styles, like width/height/borders/colors/text-alignment, etc. This is used for
    // editable datagrid cells and editable table cells
    // -----------------------------------------------------------------------------------------

    // Styling on form control dom which doesn't require text-align, padding, or color
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-text-field-middle,
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime .oj-inputdatetime-input-trigger {
      height:100%;
    }

    .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime:not(.oj-disabled) .oj-inputdatetime-input-trigger {
      @include oj-form-control-inherit-background();
    }

    // only override the border when not oj-invalid or oj-warning
    .oj-form-control-inherit:not(.oj-form-control-default) .oj-inputdatetime:not(.oj-invalid):not(.oj-warning) .oj-inputdatetime-input-trigger {
      @include oj-form-control-inherit-border();
    }

    /* Override default options*/
    $inputDateTimeDefaultOptions: ();

    @if ($inputDateTimeRenderModeOptionDefault) {
      $inputDateTimeDefaultOptions: map-merge($inputDateTimeDefaultOptions,
                                              (renderMode: $inputDateTimeRenderModeOptionDefault));
    }

    @if ($inputDateTimeKeyboardEditOptionDefault) {
      $inputDateTimeDefaultOptions: map-merge($inputDateTimeDefaultOptions,
                                              (keyboardEdit: $inputDateTimeKeyboardEditOptionDefault));
    }

    @if ($inputDateTimeDatePickerOptionDefault) {
      $inputDateTimeDefaultOptions: map-merge($inputDateTimeDefaultOptions,
                                              (datePicker: $inputDateTimeDatePickerOptionDefault));
    }

    @if ($inputDateTimeTimePickerOptionDefault) {
      $inputDateTimeDefaultOptions: map-merge($inputDateTimeDefaultOptions,
                                              (timePicker: $inputDateTimeTimePickerOptionDefault));
    }
    @if ($inputDateTimeConverterYearOptionDefault) {
      $inputDateTimeDefaultOptions: map-merge($inputDateTimeDefaultOptions,
                                              (converterYear: $inputDateTimeConverterYearOptionDefault));
    }
    @if ($inputDateTimeShowPickerOnDesktopOptionDefault) {
      $inputDateTimeDefaultOptions: map-merge($inputDateTimeDefaultOptions,
                                              (showPickerOnDesktop: $inputDateTimeShowPickerOnDesktopOptionDefault));
    }

    .oj-inputdatetime-option-defaults  {
      font-family: oj-json-from-map($inputDateTimeDefaultOptions);

    }

    // DateTime configuration
    //----------------------------------

    $dateTimePickerConfig: ();

    .oj-datetimepicker-config {
        font-family: oj-json-from-map($dateTimePickerConfig);
    }

    // TODO delete all the border information from the trigger and iput.
    // This is temporary. I would clean the whole border thing when this component is cleaned up
    .oj-text-field .oj-inputdatetime-input-trigger{
      border: 0;
    }
    .oj-inputdatetime .oj-inputdatetime-input{
      border: 0;
      background-color: transparent;
    }

    // For quiet Forms
      .oj-text-field-label-inside .oj-inputdatetime-input {
        border: 0;

        background-color: transparent;
        padding: $formControlInsidePaddingTop $formControlPaddingHorizontal 0;
        width: 100%;
      }
      
      .oj-text-field-label-inside .oj-inputdatetime-input-trigger {
        border: 0;
        min-height: $formControlInsideInputHeight;
      }

  }
}