@if luiTheme(element, field, momentpicker, enabled) {
	@at-root #{$namespace} {

		@keyframes momentPickerArrowUp {
			0%, 20%, 50%, 80%, 100% {
				transform: translateY(0);
			}
			40% {
				transform: translateY(-0.5em);
			}
			60% {
				transform: translateY(-0.25em);
			}
		}
		@keyframes momentPickerArrowDown {
			0%, 20%, 50%, 80%, 100% {
				transform: translateY(0);
			}
			40% {
				transform: translateY(0.5em);
			}
			60% {
				transform: translateY(0.25em);
			}
		}

		luid-moment {
			display: inline-block;
			vertical-align: middle;
			max-width:  luiTheme(element, field, momentpicker, max-width);
			overflow: visible !important; // Buttons

			> .separator,
			> .moment.input {
				display: inline-block;
				vertical-align: middle;
			}
			> .moment.input {
				position: relative;

				> input[type="text"] {
					text-align: center !important;
				}
			}

			.mp-button {
				position: absolute;
				left: 0;
				right: 0;
				opacity: 0;
				line-height: 1.5em;
				cursor: pointer;
				color: luiPalette(light, color);

				transition: opacity 125ms ease-out;


				&:before {
					font-size: 0.75em;
					animation-duration: 180ms;
				}
				&:active {
					&.top:before { animation-name: momentPickerArrowUp; }
					&.bottom:before { animation-name: momentPickerArrowDown; }
				}

				&.top {
					bottom: 100%;
				}
				&.bottom {
					top: 100%;
					height: 1.5em;
				}
				&.left {
					left: 0;
				}
				&.right {
					right: 0;
				}
			}

			&[disable-keyboard="true"] {
				.top.mp-button {
					top: -1.5em;
					bottom: 0;
				}
				input[type="text"] {
					&::selection {
						background: #FFF !important;
					}
					&::-moz-selection {
						background: #FFF !important;
					}
				}
			}

			input:focus ~ .mp-button,
			.moment.input:hover .mp-button,
			.mp-button:hover {
				opacity: 1;
			}

			.separator {
				opacity: 0.7;
			}
		}
	}
}