@import "../../style/color.pcss";
@import "../../style/theme.pcss";
@import "../../style/border.pcss";
@import "../../style/form.pcss";
@import "../../style/control.pcss";
@import "../../style/badge.pcss";
@import '../../style/mixin/typography.pcss';
@import '../../style/mixin/hover.pcss';

@import "../../style/control.pcss";
@import "../../style/floating-ui.pcss";

@import "./invalid.pcss";

[data-monster-role="control"] {
    @mixin text;
}

[data-monster-role="digits"] {
    display: flex;
    gap: 0.3rem;
    accent-color: var(--monster-color-secondary-2);
    flex-wrap: nowrap;
}

[data-monster-role="digits"] > input {
    width: 2rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.invalid {
    outline-color: var(--monster-color-error-2) !important;
}