.baklava-num-input {
    background: var(--baklava-control-color-background);
    color: var(--baklava-control-color-foreground);
    border-radius: var(--baklava-control-border-radius);
    width: 100%;
    display: grid;
    grid-template-columns: 20px 1fr 20px;

    & > .__button {
        display: flex;
        flex: 0 0 auto;
        width: 20px;
        justify-content: center;
        align-items: center;
        transition: background var(--baklava-visual-transition);
        cursor: pointer;

        &:hover {
            background-color: var(--baklava-control-color-hover);
        }
        &:active {
            background-color: var(--baklava-control-color-active);
        }

        &.--dec {
            grid-area: 1 / 1 / span 1 / span 1;

            & > svg {
                transform: rotateZ(90deg);
            }
        }

        &.--inc {
            grid-area: 1 / 3 / span 1 / span 1;

            & > svg {
                transform: rotateZ(-90deg);
            }
        }

        & path {
            stroke: var(--baklava-control-color-foreground);
            fill: var(--baklava-control-color-foreground);
        }
    }

    & > .__content {
        grid-area: 1 / 2 / span 1 / span 1;
        display: inline-flex;
        cursor: pointer;
        max-width: 100%;
        min-width: 0;
        align-items: center;
        transition: background-color var(--baklava-visual-transition);

        &:hover {
            background-color: var(--baklava-control-color-hover);
        }
        &:active {
            background-color: var(--baklava-control-color-active);
        }

        & > .__label,
        & > .__value {
            margin: 0.35em 0;
            padding: 0 0.5em;
        }

        & > .__label {
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }

        & > .__value {
            text-align: right;
        }

        & > input {
            background-color: var(--baklava-control-color-background);
            color: var(--baklava-control-color-foreground);
            caret-color: var(--baklava-control-color-primary);
            padding: 0.35em;
            width: 100%;
        }
    }
}
