.jb-input-web-component {
    --jb-input-input-direction: var(--jb-number-input-input-direction, ltr);

    .number-control-wrapper {
        .number-control-buttons {
            display: flex;
            height: 100%;
            cursor: pointer;
            .number-control-button {
                width: var(--jb-number-input-button-width, 36px);
                height: 100%;
                text-align: center;
            }

            .increase-number-button {
                background: var(--jb-number-input-increase-button-bg, transparent);
                border: var(--jb-number-input-increase-button-border, none);
                border-radius: var(--jb-number-input-increase-button-border-radius, 0);
                box-sizing: border-box;

                .increase-icon {
                    stroke: var(--increase-button-color);
                    stroke-width: 14px;
                    height: 100%;
                    width: 100%;
                    display: block;
                }

                &:hover {
                    .increase-icon {
                        stroke: var(--increase-button-color-hover);
                    }
                }
            }

            .decrease-number-button {
                border: var(--jb-number-input-decrease-button-border, none);
                border-radius: var(--jb-number-input-decrease-button-border-radius, 0);
                background: var(--jb-number-input-decrease-button-bg, transparent);
                box-sizing: border-box;

                .decrease-icon {
                    stroke: var(--decrease-button-color);
                    stroke-width: 14px;
                    height: 100%;
                    width: 100%;
                    display: block;
                }

                &:hover {
                    .decrease-icon {
                        stroke: var(--decrease-button-color-hover);
                    }
                }
            }
        }
    }
}