/*!
 * 
 * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */
@import "../variables";
@import "../variables/forms_vars";
@import "../variables/timepickers_vars";
@import "../mixins";

//Time Picker TYPE I CLASSES

.dlt-time-picker-item {
    // width: 12rem;

    .dlt-radio-group input+label {
        float: left;
    }

    .dlt-select-input {
        width: 100%;
    }

    .time-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        width: $time-pickers-width;
    }

    .dlt-radio-group {
        margin-left: $time-pickers-am-pm-margin-left;
    }

    .select-arrow-icon::after {
        right: $time-pickers-arrow-icon-right;
        color: $time-pickers-arrow-icon-color;
        font-size: $time-pickers-arrow-font-size;
        line-height: $time-pickers-arrow-line-height;
    }
}

.dlt-time-picker {
    background-color: $forms-color-input-background;
    width: $time-pickers-width;
    &[time-format="h:i:s"] {
        width: $time-pickers-width-ss;
    }
    line-height: $forms-input-line-height;
    border: $forms-border-width $forms-border-style $forms-color-input-border;
    border-radius: $forms-border-radii;
    font-size: $forms-input-font-size;
    font-family: $forms-font-family;
    font-weight: $forms-input-font-weight;
    color: $forms-color-text;
    padding: $forms-input-padding-y $forms-input-padding-x;

    &::placeholder {
        font-style: $forms-color-placeholder-text-style;
        color: $forms-color-placeholder-text;
    }

    &::-ms-clear {
        display: none;
    }

    &::-ms-reveal {
        display: none;
    }

    // &:hover:enabled,
    &:focus:enabled,
    &:active:enabled {
        border: $forms-border-width $forms-border-style $forms-color-primary;
        outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
        outline-offset: $forms-outline-offset;
    }

    &:disabled {
        opacity: $forms-opacity-disabled;
        cursor: not-allowed;
    }
}

//radio toggle for time picker

/* MIXINS */
@mixin hideInput {
    width: 0;
    height: 0;
    position: absolute;
    left: -9999px;
}

/* TOGGLE STYLING */
.dlt-radio-group {
    input {
        @include hideInput;
    }

    input+label {
        margin: 0;
        padding: $time-pickers-am-pm-padding;
        box-sizing: border-box;
        position: relative;
        display: inline-block;
        border: $forms-border-style $forms-border-width $forms-color-primary;
        background-color: $forms-color-input-background;
        font-family: $forms-font-family;
        font-size: $time-pickers-am-pm-font-size;
        font-weight: $time-pickers-am-pm-font-weight;
        line-height: $forms-input-line-height;
        color: $forms-color-primary;
        text-align: center;
        @include transition($time-pickers-time-transition $time-pickers-transition-effect);
        outline: none;
        box-shadow: none;
        border-radius: $forms-border-radii;

        /* ADD THESE PROPERTIES TO SWITCH FROM AUTO WIDTH TO FULL WIDTH */
        /*flex: 0 0 50%; display: flex; justify-content: center; align-items: center;*/
        /* ----- */

        &:first-of-type {
            border-radius: $forms-border-radii 0 0 $forms-border-radii;
            border-right: none;
        }

        &:last-of-type {
            border-radius: 0 $forms-border-radii $forms-border-radii 0;
            border-left: none;
        }
    }

    input:hover:enabled+label,
    input:focus:enabled+label {
        cursor: pointer;
        border-color: $forms-color-primary;
        @include box-shadow(inset 0px 0px 0px 1px $forms-color-primary);
    }

    input:enabled:not(:checked)+label {
        &:active {
            cursor: pointer;
            background-color: $forms-color-primary-light;
        }
    }

    input:checked+label {
        background-color: $forms-color-primary;
        color: $forms-color-text-inverse;
        border-color: $forms-color-primary;

        &:enabled:active {
            cursor: pointer;
            background-color: $forms-color-primary-active;
            border-color: $forms-color-primary-active;
            box-shadow: none;
        }
    }

    input:disabled+label {
        cursor: not-allowed;
    }
}

.dlt-time-picker-item-type1 {
    width: auto;

    &[disabled="disabled"] {
        opacity: $forms-opacity-disabled;
        cursor: not-allowed;

        label,
        input {
            cursor: not-allowed;
        }

        .time-picker-holder {

            &:hover,
            &:focus,
            &:active {
                border: $forms-border-width $forms-border-style $forms-color-input-border;
                outline: none;
            }
        }

        .dlt-radio-group input:checked+label,
        .dlt-radio-group input+label {
            cursor: not-allowed;
            pointer-events: none;
        }
    }

    .dlt-select-input {
        width: 100%;
    }

    .time-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        width: $time-pickers-width;
    }

    .dlt-button-group {
        float: left;
        margin-left: $time-pickers-type1-button-group-margin-left;

        .sm-button {
            padding: $time-pickers-type1-button-padding-sm;
        }
    }
}

.lg-timepicker {
    .time-picker-holder {
        height: $time-pickers-type1-holder-height-lg;

        input[type="number"] {
            height: $time-pickers-type1-input-height-lg;
            line-height: $time-pickers-type1-input-height-lg;
        }

        .minsColon {
            line-height: $time-pickers-type1-mins-line-height-lg;
        }
    }

    .dlt-radio-group input+label {
        padding: $time-pickers-type1-am-pm-padding-lg;
        line-height: $time-pickers-type1-am-pm-line-height-lg;
    }

    .time-picker-spinner {
        top: $time-pickers-type1-spinner-top-lg;
    }

    .dlt-time-picker {
        height: $time-pickers-type1-holder-height-lg;
    }

    .select-arrow-icon::after {
        font-size: $time-pickers-arrow-icon-font-size-lg;
        line-height: $time-pickers-arrow-icon-line-height-lg;
        right: $time-pickers-arrow-icon-right-lg;
    }
}

.sm-timepicker {
    .time-picker-holder {
        height: $time-pickers-type1-holder-height-sm;

        input[type="number"] {
            height: $time-pickers-type1-input-height-sm;
            line-height: $time-pickers-type1-input-height-sm;
            font-size: $forms-input-font-size-sm;
        }

        .minsColon {
            line-height: $time-pickers-type1-mins-line-height-sm;
        }
    }

    .dlt-radio-group {
        margin-left: $time-pickers-am-pm-margin-left-sm;

        input+label {
            padding: $time-pickers-type1-am-pm-padding-sm;
            line-height: $time-pickers-type1-am-pm-line-height-sm;
            font-size: $forms-input-font-size-sm;
        }
    }

    .time-picker-spinner {
        top: $time-pickers-type1-spinner-top-sm;
    }

    .dlt-time-picker {
        height: $time-pickers-type1-holder-height-sm;
        font-size: $forms-input-font-size-sm;
        line-height: $time-pickers-type1-holder-height-sm;
    }

    .select-arrow-icon::after {
        line-height: $time-pickers-arrow-icon-line-height-sm;
        font-size: $time-pickers-arrow-icon-font-size-sm;
    }

}

.dlt-time-picker1 {
    height: 0;
    width: 0;
    box-sizing: border-box;
    opacity: 0;
    overflow: hidden;
    border: 0;
    padding: 0;
}

.time-wrapper-type1 {
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
    margin-top: -1px;

    .dlt-radio-group {
        margin-left: $time-pickers-am-pm-margin-left;
    }
}

.sm-timepicker {
    .dlt-radio-group {
        margin-left:  $time-pickers-am-pm-margin-left-sm;
    }
}

.time-picker-holder {
    @extend .dlt-time-picker;
    width: auto;
    height: $time-pickers-type1-holder-height;
    padding: 0;
    position: relative;

    &:focus,
    &:active,
    &:focus-within {
        border: $forms-border-width $forms-border-style $forms-color-primary;
        outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
        outline-offset: $forms-outline-offset;
    }

    &:focus-within {
        border: $forms-border-width $forms-border-style $forms-color-primary;
        outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
        outline-offset: $forms-outline-offset;
    }

    .secsColon,
    .minsColon {
        position: absolute;
        top: 0px;
        left: $time-pickers-type1-mins-left;
    }

    .secsColon {
        left: $time-pickers-type1-secs-left;
    }

    input[type="number"] {
        -moz-appearance: textfield;
        background: none;
        border: 0;
        outline: 0;
        height: $time-pickers-type1-input-height;
        line-height: $time-pickers-type1-input-height;
        width: $time-pickers-type1-input-width;
        color: $forms-color-text;
        float: left;
        margin-top: $time-pickers-type1-input-margin-top;
        text-align: center;
        padding: 0;

        &::placeholder {
            font-style: $forms-color-placeholder-text-style;
            color: $forms-color-placeholder-text;
        }

        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button {
            -moz-appearance: textfield;
            -webkit-appearance: none;
            margin: 0;
        }
    }
}

.time-picker-spinner {
    display: none;
    width: auto;
    height: $time-pickers-type1-spinner-height;
    position: absolute;
    top: $time-pickers-type1-spinner-top;
    left: $time-pickers-type1-spinner-left;
    background: $forms-color-input-background;
    z-index: 2;
    box-shadow: $time-pickers-elevation;
    box-sizing: content-box;
    border-radius: 0 0 $forms-border-radii $forms-border-radii;

    .spinner {
        height: $time-pickers-type1-spinner-height;
        width: $time-pickers-type1-spinner-width;
        float: left;
        position: relative;
        font-family: $forms-font-family;
        font-weight: $forms-input-font-weight;
        font-size: $forms-input-font-size;
        color: $forms-color-text;

        &.hrs:after {
            content: ":";
            position: absolute;
            top: $time-pickers-type1-hrs-colon-top;
            right: $time-pickers-type1-hrs-colon-right;
        }

        &.secs:before {
            content: ":";
            position: absolute;
            top: $time-pickers-type1-secs-colon-top;
            left: $time-pickers-type1-secs-colon-left;
        }

        .number-step-up {
            right: $time-pickers-type1-stepup-right;
            top: $time-pickers-type1-stepup-top;
            position: absolute;
            height: $time-pickers-type1-stepup-height;
            width: $time-pickers-type1-stepup-width;
            font-size: $time-pickers-type1-stepup-font-size;
        }

        span {
            position: absolute;
            top: $time-pickers-type1-stepup-span-top;
            left: $time-pickers-type1-stepup-span-left;
            text-align: center;
            width: $time-pickers-type1-stepup-span-width;
        }

        .number-step-down {
            right: $time-pickers-type1-stepdown-right;
            top: $time-pickers-type1-stepdown-top;
            position: absolute;
            height: $time-pickers-type1-stepdown-height;
            width: $time-pickers-type1-stepdown-width;
            font-size: $time-pickers-type1-stepup-font-size;
        }
    }
}


// Type II CLASSES (Overriding the classes from the jQuery library)


.ui-timepicker-wrapper {
    overflow-y: auto;
    max-height: $time-pickers-list-max-height;
    padding: $time-pickers-list-padding;
    width: $time-pickers-width;
    background: $forms-color-background;
    border: 0 $forms-border-style transparent;
    box-shadow: $time-pickers-elevation;
    outline: none;
    z-index: 10052;
    margin: 0;
  }
  
//   .ui-timepicker-wrapper.ui-timepicker-with-duration {
//     width: 13em;
//   }
  
//   .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
//   .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
//     width: 11em;
//   }
  
  .ui-timepicker-list {
    margin: 0;
    list-style: none;
    font-family: $forms-font-family;
    font-weight: $forms-input-font-weight;
    font-size: $forms-input-font-size;
  }
  
//   .ui-timepicker-duration {
//     margin-left: 5px;
//     color: #888;
//   }
  
//   .ui-timepicker-list:hover .ui-timepicker-duration {
//     color: #888;
//   }
  
  .ui-timepicker-list li {
    padding: $time-pickers-list-item-padding;
    cursor: pointer;
    white-space: nowrap;
    color: $forms-color-text;
    list-style: none;
    margin: 0;
    border: $forms-border-width $forms-border-style transparent;
  }
  
  .ui-timepicker-list:hover .ui-timepicker-selected {
    background: $forms-color-background;
    color: $forms-color-text;
  }
  
  li.ui-timepicker-selected,
  .ui-timepicker-list li:hover,
  .ui-timepicker-list .ui-timepicker-selected:hover {
    background: $forms-color-background;
    color: $forms-color-text;
    border: $forms-border-width $forms-border-style $forms-color-primary;
    outline: $forms-border-width-hover $forms-border-style-hover $forms-color-primary;
    outline-offset: $forms-outline-offset;
  }
  
//   li.ui-timepicker-selected .ui-timepicker-duration,
//   .ui-timepicker-list li:hover .ui-timepicker-duration {
//     color: #ccc;
//   }
  
  .ui-timepicker-list li.ui-timepicker-disabled,
  .ui-timepicker-list li.ui-timepicker-disabled:hover,
  .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
    // color: #888;
    cursor: default;
    opacity: $forms-opacity-disabled;
  }
  
  .ui-timepicker-list li.ui-timepicker-disabled:hover,
  .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
    // background: #f2f2f2;
    opacity: $forms-opacity-disabled;
  }
  