The convention we use elsewhere is to style for the "enabled" state by default and then have conditional styles for if something is "disabled", "active", or has other interaction-based modifier to its status. I'd much prefer to stick with this convention for maintenance and ease of understanding specific interaction styling. With that said, would you mind changing the following things:

* place the default control style (full opacity/interactive look) on the UI element's default styling
* change the class name being added to toggle when a button is "disabled"
* change the disabled class name to be more in-line with how we've called this elsewhere - (.is-disabled is the common name)
* construct a selector for the .is-disabled class that adjusts the style attributes you need to show the user this control is unavailable

To that last point of showing the user the control is unavailable, it looks like you went the route of the controls being completely hidden (through opacity). I have a few concerns about this:

* making an element completely transparent still leaves it in the DOM and it can still be acted upon given its display, position, and pointer-events properties haven't been changed. A user can still inadvertently select this item 
* If these prev/next controls are always present through a student's experience with a textbook, I'd prefer to just visually show them as disabled and not acknowledge any interaction events. Changing the opacity some (0.3-0.5) would do the trick. You can try adding a class of "is-disabled" which does have some global styling support to potentially get yourself partially there. Using the %ui-disabled Sass extend - https://github.com/edx/edx-platform/blob/master/lms/static/sass/base/_mixins.scss#L63 wil also null any events being fired in IE9 and above.

Let me know if any of that is unclear or if you have concerns/questions.