.c-input--submit {
    // Can't use display: none because some browsers will pretend the input doesn't exist, and enter won't work
    visibility: hidden;
    height: 0;
    width: 0;
    padding: 0;
}

/*********************************************** CONDUCTOR LAYOUT */
.c-conductor {
    &__inputs {
        display: flex;
        flex: 0 0 auto;

        > * + * {
            margin-left: $interiorMargin;
        }
    }

    &__ticks {
        flex: 1 1 auto;
    }

    &__controls {
        grid-area: tc-controls;
        display: flex;
        align-items: center;

        > * + * {
            margin-left: $interiorMargin;
        }
    }

    /************************************ FIXED MODE STYLING */
    &.is-fixed-mode {
        .c-conductor-axis {
            &__zoom-indicator {
                border: 1px solid transparent;
                display: none; // Hidden by default
            }
        }

        &:not(.is-panning),
        &:not(.is-zooming) {
            .c-conductor-axis {
                &:hover,
                &:active {
                    cursor: col-resize;
                }
            }
        }

        &.is-panning,
        &.is-zooming {
            .c-conductor-input input {
                // Styles for inputs while zooming or panning
                background: rgba($timeConductorActiveBg, 0.4);
            }
        }

        &.alt-pressed {
            .c-conductor-axis:hover {
                // When alt is being pressed and user is hovering over the axis, set the cursor
                @include cursorGrab();
            }
        }

        &.is-panning {
            .c-conductor-axis {
                @include cursorGrab();
                background-color: $timeConductorActivePanBg;
                transition: $transIn;

                svg text {
                    stroke: $timeConductorActivePanBg;
                    transition: $transIn;
                }
            }
        }

        &.is-zooming {
            .c-conductor-axis__zoom-indicator {
                display: block;
                position: absolute;
                background: rgba($timeConductorActiveBg, 0.4);
                border-left-color: $timeConductorActiveBg;
                border-right-color: $timeConductorActiveBg;
                top: 0;
                bottom: 0;
            }
        }
    }

    /************************************ REAL-TIME MODE STYLING */
    &.is-realtime-mode {
        .c-conductor__time-bounds {
            grid-template-columns: 20px auto 1fr auto auto;
            grid-template-areas: 'tc-mode-icon tc-start tc-ticks tc-updated tc-end';
        }

        .c-conductor__end-fixed {
            grid-area: tc-updated;
        }
    }
}

.c-conductor-holder--compact {
    flex: 0 1 auto;
    overflow: hidden;

    .c-conductor {
        &__inputs,
        &__time-bounds {
            display: flex;
            flex: 0 1 auto;
            overflow: hidden;
        }

        &__inputs {
            > * + * {
                margin-left: $interiorMarginSm;
            }
        }
    }

    .is-realtime-mode .c-conductor__end-fixed {
        display: none !important;
    }
}

.c-conductor-input {
    color: $colorInputFg;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    > * + * {
        margin-left: $interiorMarginSm;
    }

    &:before {
        // Realtime-mode clock icon symbol
        margin-right: $interiorMarginSm;
    }

    input:invalid {
        background: rgba($colorFormInvalid, 0.5);
    }
}

.is-realtime-mode {
    .c-conductor__delta-button {
        color: $colorTimeRealtimeFg;
    }

    .c-conductor-input {
        &:before {
            color: $colorTimeRealtimeFgSubtle;
        }
    }

    .c-conductor__end-fixed {
        // Displays last RT update
        color: $colorTimeRealtimeFgSubtle;

        input {
            // Remove input look
            background: none;
            box-shadow: none;
            color: $colorTimeRealtimeFgSubtle;
            pointer-events: none;

            &[disabled] {
                opacity: 1 !important;
            }
        }
    }
}

.pr-tc-input-menu--start,
.pr-tc-input-menu--end {
    background: $colorBodyBg;
    border-radius: $controlCr;
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    grid-column-gap: 3px;
    grid-row-gap: 4px;
    align-items: start;
    box-shadow: $shdwMenu;
    padding: $interiorMarginLg;
    position: absolute;
    left: 8px;
    bottom: 24px;
    z-index: 99;

    &[class*='--bottom'] {
        bottom: auto;
        top: 24px;
    }
}

.pr-tc-input-menu {
    &__options {
        display: flex;

        > * + * {
            margin-left: $interiorMargin;
        }
    }

    &__input-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
        grid-column-gap: 3px;
        grid-row-gap: $interiorMargin;
        align-items: start;
    }
}

.l-shell__time-conductor .pr-tc-input-menu--end {
    left: auto;
    right: 0;
}

.pr-time-label {
    font-size: 0.9em;
    text-transform: uppercase;

    &:before {
        font-size: 0.8em;
        margin-right: $interiorMarginSm;
    }
}

.pr-time-input {
    display: flex;
    align-items: center;
    white-space: nowrap;

    > * + * {
        margin-left: $interiorMarginSm;
    }

    input {
        height: 22px;
        line-height: 1em;
        font-size: 1.25em;
    }

    &--date input {
        width: 85px;
    }

    &--time input {
        width: 70px;
    }

    &--buttons {
        > * + * {
            margin-left: $interiorMargin;
        }
    }

    &__start-end-sep {
        height: 100%;
    }

    &--input-and-button {
        @include wrappedInput();
        padding-right: unset;
    }
}

/*********************************************** COMPACT TIME CONDUCTOR */
.c-compact-tc,
.c-tc-input-popup {
    [class*='start-end-sep'] {
        opacity: 0.5;
    }
}

.c-compact-tc {
    border-radius: $controlCr;
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    padding: 2px 0;

    &__setting-wrapper {
        display: contents;
    }

    &__setting-value {
        border-right: 1px solid rgba($colorTimeCommonFg, 0.3);
        cursor: pointer;
        color: $colorTimeCommonFg;
        align-items: center;
        display: flex;
        flex: 0 1 auto;
        overflow: hidden;
        padding: 0 $fadeTruncateW;
        position: relative;
        max-width: max-content;
        text-transform: uppercase;
        white-space: nowrap;

        > * + * {
            margin-left: $interiorMarginSm;

            &:before {
                content: " - ";
                display: inline-block;
                opacity: 0.4;
            }
        }

        &[class*="icon"] {
            &:before {
                font-size: 0.75em;
                line-height: 80%;
                margin-right: $interiorMarginSm;
            }
        }
    }

    .c-toggle-switch,
    .c-clock-symbol,
    .c-conductor__mode-icon {
        // Used in independent Time Conductor
        flex: 0 0 auto;
    }

    .c-toggle-switch {
        margin-right: $interiorMarginSm;
    }

    .c-conductor__mode-icon {
        margin-left: $interiorMargin;
    }

    .c-so-view & {
        // Time Conductor in a Layout frame
        padding: 3px 0;

        .c-clock-symbol {
            $h: 13px;
            height: $h;
            width: $h;
        }

    [class*='button'] {
      $p: 0px;
      padding: $p $p + 2;
    }
  }

  &.is-fixed-mode {
    .c-conductor-axis {
      &__zoom-indicator {
        border: 1px solid transparent;
        display: none; // Hidden by default
      }
    }

    &:not(.is-panning),
    &:not(.is-zooming) {
      .c-conductor-axis {
        &:hover,
        &:active {
          cursor: col-resize;
        }
      }
    }

    &.is-panning,
    &.is-zooming {
      .c-conductor-input input {
        // Styles for inputs while zooming or panning
        background: rgba($timeConductorActiveBg, 0.4);
      }
    }

    &.alt-pressed {
      .c-conductor-axis:hover {
        // When alt is being pressed and user is hovering over the axis, set the cursor
        @include cursorGrab();
      }
    }

    &.is-panning {
      .c-conductor-axis {
        @include cursorGrab();
        background-color: $timeConductorActivePanBg;
        transition: $transIn;

        svg text {
          stroke: $timeConductorActivePanBg;
          transition: $transIn;
        }
      }
    }

    &.is-zooming {
      .c-conductor-axis__zoom-indicator {
        display: block;
        position: absolute;
        background: rgba($timeConductorActiveBg, 0.4);
        border-left-color: $timeConductorActiveBg;
        border-right-color: $timeConductorActiveBg;
        top: 0;
        bottom: 0;
      }
    }
  }
}

.u-fade-truncate,
.u-fade-truncate--lg {
    .is-fixed-mode & {
        &:after {
            @include fadeTruncate($color: $colorTimeFixedBg);
        }
    }

    .is-realtime-mode & {
        &:after {
            @include fadeTruncate($color: $colorTimeRealtimeBg);
        }
    }
}

.itc-popout.c-tc-input-popup {
    &--fixed-mode {
        background: $colorTimeFixedBg;
        color: $colorTimeFixedFgSubtle;

        em,
        .pr-time-label:before {
            color: $colorTimeFixedFg;
        }

        &__bounds__valuelue {
            color: $colorTimeFixedFg;
        }

        &__time-value {
            color: $colorTimeFixedFg;
        }

        [class*='c-button--'] {
            color: $colorTimeFixedBtnFg;

            [class*='label'] {
                color: $colorTimeRealtimeFg;
            }
        }
        .c-ctrl-wrapper--menus-up{ // A bit hacky, but we are rewriting the CSS class here for ITC such that the calendar opens at the bottom to avoid cutoff
            .c-menu {
                top: auto;
                bottom: revert !important;
              };
        }
    }
}

.is-fixed-mode.is-expanded {
    &.c-compact-tc,
    .c-tc-input-popup {
        background: $colorTimeFixedBg;
        color: $colorTimeFixedFgSubtle;

        em,
        .pr-time-label:before {
            color: $colorTimeFixedFg;
        }

        &__bounds__valuelue {
            color: $colorTimeFixedFg;
        }

        &__time-value {
            color: $colorTimeFixedFg;
        }

        [class*='c-button--'] {
            color: $colorTimeFixedBtnFg;

            [class*='label'] {
                color: $colorTimeRealtimeFg;
            }
        }
    }

    &.c-compact-tc {
        @include hover {
            $c: $colorTimeFixedHov;
            background: $c;

            [class*='u-fade-truncate']:after {
                @include fadeTruncate($color: $c);
            }
        }
    }
}

.itc-popout.c-tc-input-popup {
    &--realtime-mode {
        background: rgba($colorTimeRealtimeBg, 1);
        color: $colorTimeRealtimeFgSubtle;

        em,
        .pr-time-label:before {
            color: $colorTimeRealtimeFg;
        }

        &__bounds__valuelue {
            color: $colorTimeRealtimeFg;
        }

        &__time-value {
            color: $colorTimeRealtimeFg;
        }

        [class*='c-button--'] {
            color: $colorTimeRealtimeBtnFg;

            [class*='label'] {
                color: $colorTimeRealtimeFg;
            }
        }
    }
}

.is-realtime-mode.is-expanded {
    &.c-compact-tc,
    .c-tc-input-popup {
        background: rgba($colorTimeRealtimeBg, 1);
        color: $colorTimeRealtimeFgSubtle;

        em,
        .pr-time-label:before {
            color: $colorTimeRealtimeFg;
        }

        &__bounds__valuelue {
            color: $colorTimeRealtimeFg;
        }

        &__time-value {
            color: $colorTimeRealtimeFg;
        }

        [class*='c-button--'] {
            color: $colorTimeRealtimeBtnFg;

            [class*='label'] {
                color: $colorTimeRealtimeFg;
            }
        }
    }

    &.c-compact-tc {
        @include hover {
            $c: $colorTimeRealtimeHov;
            background: $c;

            [class*='u-fade-truncate']:after {
                @include fadeTruncate($color: $c);
            }
        }
    }

    .pr-time-input input {
        width: 3.5em; // Needed for Firefox
    }
}

.c-compact-tc {
    &.l-shell__time-conductor {
        // Main view
        min-height: 24px;
    }
}

/*********************************************** INPUTS POPUP DIALOG */
.c-tc-input-popup {
    @include menuOuter();
    padding: $interiorMarginLg;
    position: absolute;
    width: min-content;
    bottom: 35px;

    > * + * {
        margin-top: $interiorMarginLg;
    }

    &[class*='--bottom'] {
        bottom: auto;
        top: 35px;
    }

    &__options {
        display: flex;

        > * + * {
            margin-left: $interiorMargin;
        }

        .c-button--menu {
            padding: cButtonPadding($compact: true);
        }
    }
    .pr-time{
        // FIXED TIME MODE
        &-label-start-date{
            grid-area: sDate;
        }
        &-label-start-time{
            grid-area: sTime;
        }
        &-input-start-date{
            grid-area: sDateInput;
        }
        &-input-start-time{
            grid-area: sTimeInput;
        }
        &-label-end-date{
            grid-area: eDate;
        }
        &-label-end-time{
            grid-area: eTime;
        }
        &-input-end-date{
            grid-area: eDateInput;
        }
        &-input-end-time{
            grid-area: eTimeInput;
        }
        &-label-blank-grid{
            grid-area: blank;
        }

        // FIXED TIME MODE non utc
        &-input-start{
            grid-area: sInput;
        }
        &-input-end{
            grid-area: eInput;
        }

        //REAL TIME MODE
        &-label-minus-hrs{
            grid-area: labelMinusHrs;
        }
        &-label-minus-mins{
            grid-area: labelMinusMins;
        }
        &-label-minus-secs{
            grid-area: labelMinusSecs;
        }
        &-label-plus-hrs{
            grid-area: labelPlusHrs;
        }
        &-label-plus-mins{
            grid-area: labelPlusMins;
        }
        &-label-plus-secs{
            grid-area: labelPlusSecs;
        }
        &-input-minus-hrs{
            grid-area: inputMinusHrs;
        }
        &-input-minus-mins{
            grid-area: inputMinusMins;
        }
        &-input-minus-secs{
            grid-area: inputMinusSecs;
        }
        &-input-plus-hrs{
            grid-area: inputPlusHrs;
        }
        &-input-plus-mins{
            grid-area: inputPlusMins;
        }
        &-input-plus-secs{
            grid-area: inputPlusSecs;
        }
        // USED FOR BOTH 
        &-label-blank-grid{
            grid-area: empty;
        }
        &-input__start-end-sep{
            grid-area: arrowIcon;
        }
        &-input--buttons{
            grid-area: buttons;
        }
    }

    &--fixed-mode {
        .c-tc-input-popup__input-grid-utc {
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 2fr;
            grid-template-areas: 
               "sDate sTime . eDate eTime ."
               "sDateInput sTimeInput arrowIcon eDateInput eTimeInput buttons";
        }
        .c-tc-input-popup__input-grid {
            grid-template-columns: 1fr 1fr 1fr 2fr;
            grid-template-areas: 
               "sTime . eTime ."
               "sInput arrowIcon eInput buttons";
        }
        @include phonePortrait(){ 
            .c-tc-input-popup__input-grid-utc {
                grid-template-columns: repeat(2, max-content) 1fr;
                grid-template-areas:
                    "sDate sTime ."
                    "sDateInput sTimeInput ."
                    "eDate eTime ."
                    "eDateInput eTimeInput buttons";
                padding: 2px; 
                overflow: hidden;
            }
            .c-tc-input-popup__input-grid {
              grid-template-columns: repeat(2, max-content) 1fr;
              grid-template-areas:
                  "sTime ."
                  "sInput ."
                  "eTime ."
                  "eInput buttons";
              padding: 2px; 
              overflow: hidden;
          }
        }

    }

    &--realtime-mode {
        .c-tc-input-popup__input-grid, .c-tc-input-popup__input-grid-utc {
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
            grid-template-areas:
                "labelMinusHrs labelMinusMins labelMinusSecs . labelPlusHrs labelPlusMins labelPlusSecs ."
                "inputMinusHrs inputMinusMins inputMinusSecs arrowIcon inputPlusHrs inputPlusMins inputPlusSecs buttons";
        }
        @include phonePortrait(){ 
            .c-tc-input-popup__input-grid, .c-tc-input-popup__input-grid-utc {
                grid-template-columns: repeat(3, max-content) 1fr;
                grid-template-areas:
                    "labelMinusHrs labelMinusMins labelMinusSecs ."
                    "inputMinusHrs inputMinusMins inputMinusSecs ."
                    "labelPlusHrs labelPlusMins labelPlusSecs ."
                    "inputPlusHrs inputPlusMins inputPlusSecs buttons";
                padding: 2px;
                overflow: hidden;
            }
        }
    }

    &__input-grid, &__input-grid-utc {
        display: grid;
        grid-row-gap: $interiorMargin;
        grid-column-gap: $interiorMarginSm;
        align-items: start;
    }
}
@include phonePortrait(){ // Additional styling for mobile portrait.
    .c-tc-input-popup{
        width: 100%;
        &__options{
            > * {
                overflow: hidden;
                [class*= 'ctrl-wrapper']{
                    [class*='--menu'] {
                        width: 100%;
                        [class*='__label'] {
                            @include ellipsize();
                        }

                    } 
                }
            }
        }
    }

    .pr-time-input-end-time, .pr-time-input-start-time{
        > * {
            margin-right: $interiorMargin;
        } 
    }
    .pr-time-input--buttons{
        justify-content: flex-end;
    }
    .pr-time-input__start-end-sep{
        margin: auto;
    }
    .pr-time-input__start-end-sep{
        display: none;
    }
    .pr-time-input-start-date, .pr-time-input-end-date{
        width: max-content;
    }
}