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

/*********************************************** CONDUCTOR LAYOUT */
.c-conductor {
    &__time-bounds {
        display: grid;
        grid-column-gap: $interiorMargin;
        grid-row-gap: $interiorMargin;
        align-items: center;

        // Default: fixed mode, desktop
        grid-template-rows: 1fr;
        grid-template-columns: 20px auto 1fr auto;
        grid-template-areas: "tc-mode-icon tc-start tc-ticks tc-end";
    }

    &__mode-icon {
        grid-area: tc-mode-icon;
    }

    &__start-fixed,
    &__start-delta {
        grid-area: tc-start;
        display: flex;
    }

    &__end-fixed,
    &__end-delta {
        grid-area: tc-end;
        display: flex;
        justify-content: flex-end;
    }

    &__ticks {
        grid-area: tc-ticks;
    }

    &__controls {
        grid-area: tc-controls;
        display: flex;
        align-items: center;
        > * + * {
            margin-left: $interiorMargin;
        }
    }

    [class*='-delta'] {
        &:before {
            content: $glyph-icon-clock;
            font-family: symbolsfont;
        }
    }

    &.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;
        }
    }

    body.phone.portrait & {
        .c-conductor__time-bounds {
            grid-row-gap: $interiorMargin;
            grid-template-rows: auto auto;
            grid-template-columns: 20px auto auto;
        }

        .c-conductor__controls {
            padding-left: 25px; // Line up visually with other controls
        }

        &__mode-icon {
            grid-row: 1;
        }

        &__ticks,
        &__zoom {
            display: none;
        }

        &.is-fixed-mode {
            [class*='__start-fixed'],
            [class*='__end-fixed'] {
                [class*='__label'] {
                    // Start and end are in separate columns; make the labels line up
                    width: 30px;
                }
            }

            [class*='__end-input'] {
                justify-content: flex-start;
            }

            .c-conductor__time-bounds {
                grid-template-areas:
                    "tc-mode-icon tc-start tc-start"
                    "tc-mode-icon tc-end tc-end"
                }
            }

        &.is-realtime-mode {
            .c-conductor__time-bounds {
                grid-template-areas:
                    "tc-mode-icon tc-start tc-updated"
                    "tc-mode-icon tc-end tc-end";
            }

            .c-conductor__end-fixed {
                justify-content: flex-end;
            }
        }
    }
}

.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;
    }

    .c-direction-indicator {
        // Holds realtime-mode + and - symbols
        font-size: 0.7em;
    }

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

.is-realtime-mode {
    button {
        @include themedButton($colorTimeBg);
        color: $colorTimeFg;

        &:hover {
            background: $colorTimeHov !important;
            color: $colorTimeFg !important;
        }
    }

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

    .c-conductor__end-fixed {
        // Displays last RT udpate
        color: $colorTime;

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