@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';

@otp-prefix: ~'@{ant-prefix}-input-otp';

.@{otp-prefix} {
	&-container,
	&-container-input {
		width: 100%;
		display: flex;
		justify-content: center;
		gap: 4px;

		span.@{ant-prefix}-input-affix-wrapper.@{otp-prefix} {
			width: 55px;
		}

		.@{ant-prefix}-input-affix-wrapper {
			input {
				text-align: center;
				font-weight: 900;
				color: @dbk-warning;
			}
		}
	}

	&-container {
		align-items: center;
		flex-direction: column;
		gap: 1rem;

		.@{ant-prefix}-statistic {
			&-content {
				color: @dbk-primary;
				font-size: @font-size-base;
				font-weight: 500;
			}
		}
	}

	&.@{ant-prefix}-input {
		text-align: center;
		width: 2.5rem;
		font-size: @font-size-lg;
		line-height: 1;
		color: @dbk-warning;
		font-weight: 600;

		&[type='number'] {
			-moz-appearance: textfield;

			&::-webkit-inner-spin-button,
			&::-webkit-outer-spin-button {
				-webkit-appearance: none;
			}
		}

		&[type='password'] {
			&::-ms-reveal,
			&::-ms-clear {
				display: none;
			}
		}
	}

	&-small.@{ant-prefix}-input {
		width: 2rem;
		font-size: @font-size-base;
	}

	&-large.@{ant-prefix}-input {
		width: 2.75rem;
		font-size: @font-size-lg + 4;
	}
}