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

    .number-control-wrapper {
        .number-control-buttons {
            display: flex;
            height: 100%;
            cursor: pointer;
            .number-control-button {
                all: unset;
                box-sizing: border-box;
                cursor: pointer;
                width: var(--button-width);
                height: 100%;
                text-align: center;

                &:disabled {
                    cursor: default;
                }

                &:focus-visible {
                    outline: 2px solid var(--jb-number-input-focus-ring-color, Highlight);
                    outline-offset: 2px;
                }
            }

            .increase-number-button {
                background: var(--increase-button-bg);
                border: var(--increase-button-border);
                border-radius: var(--increase-button-border-radius);
                box-sizing: border-box;

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

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

            .decrease-number-button {
                border: var(--decrease-button-border);
                border-radius: var(--decrease-button-border-radius);
                background: var(--decrease-button-bg);
                box-sizing: border-box;

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

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