gtx-date-time-picker > gtx-input > input:not(:disabled) {
    &[type=text] {
        color: inherit;
    }

    &, & + label {
        cursor: pointer;
    }

    &.ng-touched.ng-invalid {
        input {
            border-color: $gtx-color-alert;
        }

        label {
            color: $gtx-color-alert;
        }
    }
}

gtx-date-time-picker {
    display: flex;
    flex-direction: row;

    gtx-input {
        flex: 1 1 auto;

        &.clearable input[type=text] {
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            border-right-width: 1px;
        }
    }


    .clear-button {
        align-self: flex-start;
        background: $gtx-color-very-light-gray;
        border-top: 2px solid $gtx-color-light-gray;
        border-right: 2px solid $gtx-color-light-gray;
        border-bottom: 2px solid $gtx-color-light-gray;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        display: flex;
        flex-direction: column;
        height: 2.5rem;
        justify-content: center;
        margin-top: 20px;
    }
}