// Copyright (c) 2014, 2023, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// WARNING: do not directly import this file, instead import the 
//          version in your base theme's directory, 
//          for example alta/widgets/_oj.alta.button.scss
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

@import "../../utilities/oj.utilities";


@mixin oj-button-padding($selector:null,
                         $buttonIconOnlyPadding:   $buttonIconOnlyPadding, 
                         $buttonTextToEdgePadding: $buttonTextToEdgePadding,
                         $buttonIconToEdgePadding: $buttonIconToEdgePadding,
                         $buttonIconToTextPadding: $buttonIconToTextPadding)
{


    /* The element containing the text of buttons without icons.  This is the Button (input element) 
     * itself for <input type=button|submit|reset>, which doesn't support icons at all, and a nested span 
     * for other types of Buttons.
     */
    input#{$selector}.oj-button[type="button"], // doesn't support icons
    input#{$selector}.oj-button[type="submit"], // doesn't support icons
    input#{$selector}.oj-button[type="reset"], // doesn't support icons
    #{$selector}.oj-button-nocomp.oj-button-text-only, // nocomp button text-only
    #{$selector}.oj-buttonset .oj-button-text-only .oj-button-text, // toggle button custom element case
    #{$selector}.oj-button-text-only .oj-button-text { // button types that do support icons but don't have any
        padding: 0 $buttonTextToEdgePadding;
    }

    /* The text span of buttons with text, a left icon, but no right icon */
    #{$selector}.oj-buttonset .oj-button-text-icon-start .oj-button-text, // toggle button custom element case
    #{$selector}.oj-button-text-icon-start .oj-button-text {
        @include oj-ltr() {
            padding: 0 $buttonTextToEdgePadding 0 0;
        }
    }
    #{$selector}.oj-buttonset .oj-button-text-icon-end .oj-button-text, // toggle button custom element case
    #{$selector}.oj-button-text-icon-end .oj-button-text {
        @include oj-rtl() {
            padding: 0 $buttonTextToEdgePadding 0 0;
        }
    }

    /* The text span of buttons with text, a right icon, but no left icon */
    #{$selector}.oj-buttonset .oj-button-text-icon-end .oj-button-text, // toggle button custom element case
    #{$selector}.oj-button-text-icon-end .oj-button-text {
        @include oj-ltr() {
            padding: 0 0 0 $buttonTextToEdgePadding;
        }
    }
    #{$selector}.oj-buttonset .oj-button-text-icon-start .oj-button-text, // toggle button custom element case
    #{$selector}.oj-button-text-icon-start .oj-button-text {
        @include oj-rtl() {
            padding: 0 0 0 $buttonTextToEdgePadding;
        }
    }

    /* The text span of buttons with text and both icons */
    #{$selector}.oj-buttonset .oj-button-text-icons .oj-button-text, // toggle button custom element case
    #{$selector}.oj-button-text-icons .oj-button-text { 
        padding: 0;
    }

    /* The left icon of buttons with text and a left icon, with or without a right icon */
    #{$selector}.oj-buttonset .oj-button-text-icon-start .oj-button-icon.oj-start, // toggle button custom element case
    #{$selector}.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-start,      // toggle button custom element case
    #{$selector}.oj-button-text-icon-start .oj-button-icon.oj-start, 
    #{$selector}.oj-button-text-icons .oj-button-icon.oj-start {
        // because this is a contextual selector it has a higher specificity,
        // so using margin-right: and margin-left: instead of margin: so that
        // it's easy for people to add some margins at the top/bottom
        // to center images 
        @include oj-ltr() {
            display: inline-flex;
            margin-right: $buttonIconToTextPadding;
            margin-left:  $buttonIconToEdgePadding;
        }
    }
    #{$selector}.oj-buttonset .oj-button-text-icon-end .oj-button-icon.oj-end,   // toggle button custom element case
    #{$selector}.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-end,      // toggle button custom element case
    #{$selector}.oj-button-text-icon-end .oj-button-icon.oj-end, 
    #{$selector}.oj-button-text-icons .oj-button-icon.oj-end { 
        // because this is a contextual selector it has a higher specificity,
        // so using margin-right: and margin-left: instead of margin: so that
        // it's easy for people to add some margins at the top/bottom
        // to center images 
        @include oj-rtl() {
            display: inline-flex;
            margin-right: $buttonIconToTextPadding;
            margin-left:  $buttonIconToEdgePadding;
        }
    }

    /* The left icon of buttons with 2 icons and no text */
    #{$selector}.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-start,   // toggle button custom element case
    #{$selector}.oj-button-icons-only .oj-button-icon.oj-start {
        // because this is a contextual selector it has a higher specificity,
        // so using margin-right: and margin-left: instead of margin: so that
        // it's easy for people to add some margins at the top/bottom
        // to center images 
        @include oj-ltr() {
            display: inline-flex;
            margin-right: $buttonIconToTextPadding;
            margin-left:  $buttonIconOnlyPadding; // between-icon padding lives on left icon
        }
    }
    #{$selector}.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-end,   // toggle button custom element case
    #{$selector}.oj-button-icons-only .oj-button-icon.oj-end {
        // because this is a contextual selector it has a higher specificity,
        // so using margin-right: and margin-left: instead of margin: so that
        // it's easy for people to add some margins at the top/bottom
        // to center images 
        @include oj-rtl() {
            display: inline-flex;
            margin-right: $buttonIconToTextPadding;
            margin-left:  $buttonIconOnlyPadding; // between-icon padding lives on left icon
        }
    }

    /* The icon of buttons with with 1 icon (whether start or end) and no text */
    #{$selector}.oj-buttonset .oj-button-icon-only .oj-button-icon,   // toggle button custom element case
    #{$selector}.oj-button-nocomp .oj-button-icon-only, // nocomp button icon-only
    #{$selector}.oj-button-icon-only .oj-button-icon { 
        // because this is a contextual selector it has a higher specificity,
        // so using margin-right: and margin-left: instead of margin: so that
        // it's easy for people to add some margins at the top/bottom
        // to center images 
        margin-right: $buttonIconOnlyPadding;
        margin-left:  $buttonIconOnlyPadding;
    }

    /* The right icon of buttons with text and a right icon, with or without a left icon */
    #{$selector}.oj-buttonset .oj-button-text-icon-end .oj-button-icon.oj-end,   // toggle button custom element case
    #{$selector}.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-end,      // toggle button custom element case
    #{$selector}.oj-button-text-icon-end .oj-button-icon.oj-end, 
    #{$selector}.oj-button-text-icons .oj-button-icon.oj-end { 
        // because this is a contextual selector it has a higher specificity,
        // so using margin-right: and margin-left: instead of margin: so that
        // it's easy for people to add some margins at the top/bottom
        // to center images 
        @include oj-ltr() {
            display: inline-flex;
            margin-right: $buttonIconToEdgePadding;
            margin-left: $buttonIconToTextPadding;
        }
    }
    #{$selector}.oj-buttonset .oj-button-text-icon-start .oj-button-icon.oj-start,   // toggle button custom element case
    #{$selector}.oj-buttonset .oj-button-text-icons .oj-button-icon.oj-start,        // toggle button custom element case
    #{$selector}.oj-button-text-icon-start .oj-button-icon.oj-start, 
    #{$selector}.oj-button-text-icons .oj-button-icon.oj-start {
        // because this is a contextual selector it has a higher specificity,
        // so using margin-right: and margin-left: instead of margin: so that
        // it's easy for people to add some margins at the top/bottom
        // to center images 
        @include oj-rtl() {
            display: inline-flex;
            margin-right: $buttonIconToEdgePadding;
            margin-left: $buttonIconToTextPadding;
        }
    }

    /* The right icon of buttons with 2 icons and no text */
    #{$selector}.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-end,   // toggle button custom element case
    #{$selector}.oj-button-icons-only .oj-button-icon.oj-end {
        // because this is a contextual selector it has a higher specificity,
        // so using margin-right: and margin-left: instead of margin: so that
        // it's easy for people to add some margins at the top/bottom
        // to center images 
        @include oj-ltr() {
            display: inline-flex;
            // between-icon padding lives on left icon, not this right icon
            margin-right: $buttonIconOnlyPadding;
        }
    }
    #{$selector}.oj-buttonset .oj-button-icons-only .oj-button-icon.oj-start,    // toggle button custom element case
    #{$selector}.oj-button-icons-only .oj-button-icon.oj-start {
        // because this is a contextual selector it has a higher specificity,
        // so using margin-right: and margin-left: instead of margin: so that
        // it's easy for people to add some margins at the top/bottom
        // to center images 
        @include oj-rtl() {
            display: inline-flex;
            // between-icon padding lives on left icon, not this right icon
            margin-right: $buttonIconOnlyPadding; 
        }
    }
    #{$selector}.oj-button-icon-only .oj-button-icon {
        display: inline-flex;
    }
}

@mixin oj-button-padding-css-vars($selector:null,
                         $buttonIconOnlyPadding:   var(--oj-button-icon-only-padding), 
                         $buttonTextToEdgePadding: var(--oj-button-text-to-edge-padding),
                         $buttonIconToEdgePadding: var(--oj-button-icon-to-edge-padding),
                         $buttonIconToTextPadding: var(--oj-button-icon-to-text-padding))
{
  @include oj-button-padding($selector,
                           $buttonIconOnlyPadding, 
                           $buttonTextToEdgePadding,
                           $buttonIconToEdgePadding,
                           $buttonIconToTextPadding);
}


// Mixin to support "colored" buttons like "primary" and "confirm".
@mixin oj-button-alt($altBgColor, $altTextColor) {
    @include oj-button-state-flat (
        $altButtonTextColor:              $altTextColor,        
        $altButtonBgColor:                $altBgColor,        
        $altButtonBoxShadow:              null,        
        $altButtonBoxShadowHover:         null,        
        $altButtonBoxShadowActive:        null
    )
}  


@if $includeButtonClasses != false {
  @include module-include-once("common.button") {
 

    /* button */
    /* --------------------------------------------------------------- */

    // This is to prevent the flash of unstyled content before the html becomes JET components.
    @if $initialVisibility == hidden {
      oj-button:not(.oj-complete) {
        visibility: hidden;
      }      
    }

    // do not overwrite hidden display properties
    [hidden].oj-button,
    [hidden].oj-button-nocomp {
        display: none;
    }

    .oj-button, // root element jqui/button or custom element/oj-button
    .oj-button-nocomp {  // nocomp button

        // height and width set on the root and the container button will inherit that value
        height: $buttonHeight;
        
        // AltaWeb spec says 3px spacing (i.e. margin) between buttons, so 1.5px margin on left and right.
        // Since Buttons are inline-flex, the spacing is approximately 3px whenever the HTML has any
        // whitespace between the elements, which is usually the case. Therefore leaving off left/right margins.
        margin-bottom: $wrappableMarginBottom;
        
        font-size: $buttonFontSize;


      // set inline-flex on root node
      display: inline-flex;

      // Required for buttons to line up in FF (see Bug 23025205)
      vertical-align: middle;
    }
    
    // fill container height and width from container if set, cannot inherit because doesn't work with percentage values
    .oj-button-button {  // custom element only
        width: 100%;
        height: 100%;
    }

    .oj-button-toggle,     
    .oj-button-nocomp,   // nocomp button only
    .oj-button-button {  // custom element only
        justify-content: center;
        min-width: 0; // By default, flex items won't shrink below their minimum content size unless min-width specified

        // vertically center containing items
        align-items: center;

        padding: 0; 
        border: 1px solid;       
        

          @include oj-border-radius( $buttonBorderRadius );


        white-space: nowrap;
        overflow: hidden;

        box-sizing: border-box;

        // font-size and font-family are needed for the
        // case where you use a button tag to create
        // the button, the font family and size aren't
        // inherited on a button tag.
        font-family: inherit;
        
        // Prevent flash as button clicks 300ms after the tap on touch devices.
        // iOS is inconsistent as to whether :active is applied during that click, 
        // so mysteriously starts and stops working if use .oj-button:active for this rule.
        -webkit-tap-highlight-color: transparent;
    }

    // specificity needed to override this Normalize rule:  html input[type="button"] {cursor: pointer} 
    html body .oj-button-toggle,                
    html body .oj-button-nocomp,   // nocomp button only
    html body .oj-button-button {  // custom element only

        cursor: $buttonCursor;         

    }

    // display inline-flex doesn't seem to quite work in IE 11 for input based buttons; they do not behave inline unless they're display inline-block
    // luckily having flex display for these is not essential because labels are automatically vertically aligned properly.
    input.oj-button[type="button"], 
    input.oj-button[type="submit"], 
    input.oj-button[type="reset"] {
        display: inline-block;
    }

    /* The root element of toggle (radio and checkbox) buttons */
    .oj-button-toggle {
        position: relative; // See comments for bug 20867328 below
    }

    /* The <label> of toggle (radio and checkbox) buttons or <div> of <button> type buttons*/
    .oj-button-label,
    .oj-button-label oj-option {
        cursor: inherit; // follow oj-button's lead
        
        // very important: make <label> fill up the containing oj-button <span> so all clicks, hovers, etc. are received by the <label>
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    /* The <input> of toggle (radio and checkbox) buttons */
    .oj-button-input {
        // VoiceOver bug 20867328: VO taps go to wrong toggle button unless input positioned underneath its own label.
        left: 0;
        top: 0;
    }

    /* "oj-button-icon oj-start" is applied to the button's start icon, if any.  
       "oj-button-icon oj-end" is applied to the button's end icon, if any.  */
    .oj-button .oj-button-icon {
        font-weight: normal;
        text-shadow: none;
    }

    // Since buttons can have variable widths ensure button text truncates with ellipsis if button gets too small
    .oj-button .oj-button-text,
    .oj-button-nocomp {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    // Alternate button sizes
    //----------------------------------
    
    .oj-button.oj-button-sm,
    .oj-button-nocomp.oj-button-sm, 
    .oj-buttonset.oj-button-sm .oj-button-toggle    {  // custom element buttonset    

        height: $buttonSmallHeight;
        line-height: $buttonSmallHeight;
        font-size: $buttonSmallFontSize;

    }

    .oj-button.oj-button-lg,
    .oj-button-nocomp.oj-button-lg,
    .oj-buttonset.oj-button-lg .oj-button-toggle    {  // custom element buttonset

        height: $buttonLargeHeight;
        line-height: $buttonLargeHeight;
        font-size: $buttonLargeFontSize;
      }


    .oj-button.oj-button-xl,
    .oj-button-nocomp.oj-button-xl,
    .oj-buttonset.oj-button-xl .oj-button-toggle    {  // custom element buttonset

        height: $buttonXlargeHeight;
        line-height: $buttonXlargeHeight;
        font-size: $buttonXlargeFontSize;

    }


    // Button states
    //----------------------------------


    .oj-button-toggle,            
    .oj-button-button,          // custom element only
    .oj-button-nocomp,          // nocomp button only
    .oj-button-toggle:link,       
    .oj-button-button:link,     // custom element only
    .oj-button-nocomp:link,     // nocomp button only
    .oj-button-toggle:visited,    
    .oj-button-button:visited,  // custom element only
    .oj-button-nocomp:visited,  // nocomp button only
    .oj-button-toggle:hover,      
    .oj-button-button:hover,    // custom element only
    .oj-button-nocomp:hover,    // nocomp button only
    .oj-button-toggle:active,     
    .oj-button-button:active,   // custom element only
    .oj-button-nocomp:active {  // nocomp button only
        text-decoration: none; 
    }

    .oj-button-toggle:not(.oj-focus-highlight):focus,                
    .oj-button-nocomp:not(.oj-focus-highlight):focus,              // nocomp button only
    .oj-button:not(.oj-focus-highlight) .oj-button-button:focus {  // custom element only
        outline: none;
    }

    // The oj-focus-highlight class applies focus styling that may not be desirable
    // when the focus results from pointer interaction (touch or mouse), but which is
    // needed for accessibility when the focus occurs by a non-pointer mechanism, for
    // example keyboard or initial page load.
    // See also the $focusHighlightPolicy variable, which controls when this 
    // class is set.  That variable affects multiple components, not just Button.
    .oj-button-toggle.oj-focus-highlight,                
    .oj-button-nocomp.oj-focus-highlight,              // nocomp button only
    .oj-button.oj-focus-highlight .oj-button-button {  // custom element only

        @include oj-browser-focus-outline-approximation($primaryTextColor);        

    }

    .oj-button-toggle.oj-disabled,                
    .oj-button-nocomp:disabled,                 // nocomp button only
    .oj-button.oj-disabled .oj-button-button {  // custom element only
        cursor: default; // in case a themer sets clickable "hand" cursor on buttons, override it if disabled
    }


    // Full-chrome buttons
    //----------------------------------


    /* Full-chrome buttons have chrome (background and border) in all states (default, 
     * focus-only, disabled, hover, active, selected, ...).
     */

    .oj-button-toggle.oj-button-full-chrome,                       
    .oj-button-toggle.oj-button-full-chrome:link,                  
    .oj-button-toggle.oj-button-full-chrome:visited,               
    .oj-button-toggle.oj-button-full-chrome:hover,                 
    .oj-button-toggle.oj-button-full-chrome:active,                
    .oj-button-nocomp.oj-button-full-chrome,                     // nocomp button only
    .oj-button-nocomp.oj-button-full-chrome:link,                // nocomp button only
    .oj-button-nocomp.oj-button-full-chrome:visited,             // nocomp button only
    .oj-button-nocomp.oj-button-full-chrome:hover,               // nocomp button only
    .oj-button-nocomp.oj-button-full-chrome:active,              // nocomp button only
    .oj-button.oj-button-full-chrome .oj-button-button,          // custom element only
    .oj-button.oj-button-full-chrome .oj-button-button:link,     // custom element only
    .oj-button.oj-button-full-chrome .oj-button-button:visited,  // custom element only
    .oj-button.oj-button-full-chrome .oj-button-button:hover,    // custom element only
    .oj-button.oj-button-full-chrome .oj-button-button:active {  // custom element only
        // can't set font-weight on oj-button-text class because oj-button-text 
        // not used on inputs of type button, submit, and reset

          font-weight: $buttonFontWeight;          

    }

    /* oj-default is applied iff the button is not in any of the other states, 
       namely oj-active, oj-disabled, oj-selected, oj-hover, or oj-focus.
       oj-focus-only is applied iff the button has oj-focus but not any of the other 4 states listed above.*/
    .oj-button-toggle.oj-default.oj-button-full-chrome,                   
    .oj-button-toggle.oj-focus-only.oj-button-full-chrome,                
    .oj-button-nocomp.oj-button-full-chrome,                            // nocomp button only
    .oj-button.oj-default.oj-button-full-chrome .oj-button-button,      // custom element only
    .oj-button.oj-focus-only.oj-button-full-chrome .oj-button-button {  // custom element only

        background-color: $buttonBgColor; 
        @include oj-background-image($buttonBgImage);
        border-color: $buttonBorderColor;
        color: $buttonTextColor;
        @include oj-box-shadow($buttonBoxShadow);
        // can't set text-shadow on oj-button-text class because oj-button-text
        // not used on inputs of type button, submit, and reset
        text-shadow: $buttonTextShadow ;

    }

    .oj-button.oj-default.oj-button-full-chrome .oj-button-icon,
    .oj-button-nocomp.oj-button-full-chrome .oj-button-icon,
    .oj-button.oj-focus-only.oj-button-full-chrome .oj-button-icon {


        color: $buttonIconColor;         

    }

    .oj-button-toggle.oj-hover.oj-button-full-chrome,                
    .oj-button-nocomp.oj-button-full-chrome:hover,                 // nocomp button only
    .oj-button.oj-hover.oj-button-full-chrome .oj-button-button {  // custom element only

        background-color: $buttonBgColorHover;
        @include oj-background-image($buttonBgImageHover);
        border-color: $buttonBorderColorHover;
        color: $buttonTextColorHover;
        @include oj-box-shadow($buttonBoxShadowHover);
        // can't set text-shadow on oj-button-text class because oj-button-text
        // not used on inputs of type button, submit, and reset
        text-shadow: $buttonTextShadowHover;

    }

    .oj-button.oj-hover.oj-button-full-chrome .oj-button-icon,
    .oj-button-nocomp.oj-button-full-chrome:hover .oj-button-icon {

        color: $buttonIconColorHover;         

    }

    // active should trump hover
    /* oj-active is applied to a push button when it is actively being held down 
       by the mouse button or Enter or Spacebar. */
    .oj-button-toggle.oj-active.oj-button-full-chrome,                
    .oj-button-nocomp.oj-button-full-chrome:active,                 // nocomp button only
    .oj-button-nocomp.oj-active.oj-button-full-chrome,                 // nocomp button only (enter key)
    .oj-button.oj-active.oj-button-full-chrome .oj-button-button {  // custom element only

        background-color: $buttonBgColorActive;
        @include oj-background-image($buttonBgImageActive);
        border-color: $buttonBorderColorActive;
        color: $buttonTextColorActive;
        @include oj-box-shadow($buttonBoxShadowActive);
        // can't set text-shadow on oj-button-text class because oj-button-text
        // not used on inputs of type button, submit, and reset
        text-shadow: $buttonTextShadowActive;
        opacity: $buttonOpacityActive;

    }

    // active should trump hover
    .oj-button.oj-active.oj-button-full-chrome .oj-button-icon,
    .oj-button-nocomp.oj-button-full-chrome:active .oj-button-icon,
    .oj-button-nocomp.oj-active.oj-button-full-chrome .oj-button-icon {

        color: $buttonIconColorActive;         

    }

    // selected mostly trumps hover (like active), but unlike active, the text/icon
    // colors are a 3rd color different than the selected color and hover color
    .oj-button-toggle.oj-selected.oj-button-full-chrome,                
    .oj-button.oj-selected.oj-button-full-chrome .oj-button-button {  // custom element only

        background-color: $buttonBgColorSelected;
        @include oj-background-image($buttonBgImageSelected);
        border-color: $buttonBorderColorSelected;
        color: $buttonTextColorSelected;
        @include oj-box-shadow($buttonBoxShadowSelected);
        // can't set text-shadow on oj-button-text class because oj-button-text
        // not used on inputs of type button, submit, and reset
        text-shadow: $buttonTextShadowSelected;

    }

    .oj-button-toggle.oj-selected.oj-hover.oj-button-full-chrome,                
    .oj-button.oj-selected.oj-hover.oj-button-full-chrome .oj-button-button {  // custom element only

        color: $buttonTextColorSelectedHover;  
        background-color: $buttonBgColorSelectedHover;
        border-color: $buttonBorderColorSelectedHover;

    }

    .oj-button.oj-selected.oj-button-full-chrome .oj-button-icon {

        color: $buttonIconColorSelected;         

    }

    .oj-button.oj-selected.oj-hover.oj-button-full-chrome .oj-button-icon {

        color: $buttonIconColorSelectedHover;         

    }

    .oj-button-toggle.oj-disabled.oj-button-full-chrome,                
    .oj-button-nocomp.oj-button-full-chrome:disabled,                 // nocomp button only
    .oj-button.oj-disabled.oj-button-full-chrome .oj-button-button {  // custom element only

        background-color: $buttonBgColorDisabled;
        border-color: $buttonBorderColorDisabled;
        color: $buttonTextColorDisabled;
        @include oj-box-shadow($buttonBoxShadowDisabled); 
        opacity: $buttonOpacityDisabled;
        @include oj-background-image(none);

    }

    .oj-button.oj-disabled.oj-button-full-chrome .oj-button-icon,
    .oj-button-nocomp.oj-button-full-chrome:disabled .oj-button-icon  {

        color: $buttonIconColorDisabled;         

    }

    // Unlike other occurrences of .oj-selected, these "disabled selected" rules have no corresponding "disabled active"
    // rules, since disabled buttons can't be active (pressed down by mouse/Space/Enter).

    .oj-button-toggle.oj-disabled.oj-selected.oj-button-full-chrome,                
    .oj-button.oj-disabled.oj-selected.oj-button-full-chrome .oj-button-button {  // custom element only

        color: $buttonTextColorSelectedDisabled;
        background-color: $buttonBgColorSelectedDisabled;
        border-color: $buttonBorderColorSelectedDisabled;

    }

    .oj-button.oj-disabled.oj-selected.oj-button-full-chrome .oj-button-icon {

        color: $buttonIconColorSelectedDisabled;        

    }


    // Half-chrome buttons
    //----------------------------------


    /* Half-chrome buttons have no chrome (background or border) in their default, 
     * focus-only, and disabled-not-selected states, but acquire chrome in their 
     * hover, active, and selected states.
     * 
     * Half-chroming is recommended for buttons in a toolbar, and anytime the 
     * half-chrome look is desired.
     * 
     * To set button chroming, use the "chroming" option on the Button, Buttonset, and Toolbar
     * components, per the JSDoc.  Do not apply the oj-button-XXX-chrome classes manually.
     */
    
    // half-chrome and (default or focus-only or disabled)
    .oj-button-toggle.oj-default.oj-button-half-chrome,                 
    .oj-button-toggle.oj-focus-only.oj-button-half-chrome,              
    .oj-button-toggle.oj-disabled.oj-button-half-chrome,                
    .oj-button-nocomp.oj-button-half-chrome,                          // nocomp button only
    .oj-button-nocomp.oj-button-half-chrome:disabled,                 // nocomp button only
    .oj-button.oj-default.oj-button-half-chrome .oj-button-button,    // custom element only
    .oj-button.oj-focus-only.oj-button-half-chrome .oj-button-button, // custom element only
    .oj-button.oj-disabled.oj-button-half-chrome .oj-button-button {  // custom element only
        border-color: transparent;
        background-color: transparent;

          @include oj-background-image(none);
          @include oj-box-shadow(none);

    }

    // half-chrome and (default or focus-only)
    .oj-button-toggle.oj-default.oj-button-half-chrome,                   
    .oj-button-toggle.oj-focus-only.oj-button-half-chrome,                
    .oj-button-nocomp.oj-button-half-chrome,                            // LV nocomp
    .oj-button.oj-default.oj-button-half-chrome .oj-button-button,      // custom element only
    .oj-button.oj-focus-only.oj-button-half-chrome .oj-button-button {  // custom element only
        text-shadow: none;

          color: $buttonHalfChromeTextColor;          

    }

    // half-chrome hover
    .oj-button-toggle.oj-hover.oj-button-half-chrome,                
    .oj-button-nocomp.oj-button-half-chrome:hover,                 // nocomp button only
    .oj-button.oj-hover.oj-button-half-chrome .oj-button-button {  // custom element only


        color: $buttonHalfChromeTextColorHover;
        background-color: $buttonHalfChromeBgColorHover;
        border-color: $buttonHalfChromeBorderColorHover;
        @include oj-box-shadow(none);

    }

    // half-chrome active: should trump half-chrome hover
    .oj-button-toggle.oj-active.oj-button-half-chrome,                
    .oj-button-nocomp.oj-button-half-chrome:active,                 // nocomp button only
    .oj-button-nocomp.oj-active.oj-button-half-chrome,              // nocomp button only (enter key)
    .oj-button.oj-active.oj-button-half-chrome .oj-button-button {  // custom element only

        color: $buttonHalfChromeTextColorActive;
        background-color: $buttonHalfChromeBgColorActive;
        border-color: $buttonHalfChromeBorderColorActive;
        opacity: $buttonHalfChromeOpacityActive;
        @include oj-box-shadow(none);

    }

    // half-chrome selected
    .oj-button-toggle.oj-selected.oj-button-half-chrome,                
    .oj-button.oj-selected.oj-button-half-chrome .oj-button-button {  // custom element only

        color: $buttonHalfChromeTextColorSelected;
        background-color: $buttonHalfChromeBgColorSelected;
        border-color: $buttonHalfChromeBorderColorSelected;
        @include oj-box-shadow(none); 

    }

    // half-chrome selected hover 
    .oj-button-toggle.oj-selected.oj-hover.oj-button-half-chrome,                
    .oj-button.oj-selected.oj-hover.oj-button-half-chrome .oj-button-button {  // custom element only

        color: $buttonHalfChromeTextColorSelectedHover;
        background-color: $buttonHalfChromeBgColorSelectedHover;
        border-color: $buttonHalfChromeBorderColorSelectedHover;


    }

    // half-chrome disabled
    .oj-button-toggle.oj-disabled.oj-button-half-chrome,                
    .oj-button-nocomp.oj-button-half-chrome:disabled,                 // nocomp button only
    .oj-button.oj-disabled.oj-button-half-chrome .oj-button-button {  // custom element only

        color: $buttonHalfChromeTextColorDisabled;
        opacity: $buttonHalfChromeOpacityDisabled;

    }

    // half-chrome disabled selected
    // Unlike other occurrences of .oj-selected, this "disabled selected" rule has no corresponding "disabled active"
    // rule, since disabled buttons can't be active (pressed down by mouse/Space/Enter).
    // 6/2014:  still need this line for specificity
    .oj-button-toggle.oj-disabled.oj-selected.oj-button-half-chrome,                
    .oj-button.oj-disabled.oj-selected.oj-button-half-chrome .oj-button-button {  // custom element only

        color: $buttonHalfChromeTextColorSelectedDisabled;
        background-color: $buttonHalfChromeBgColorSelectedDisabled;
        border-color: $buttonHalfChromeBorderColorSelectedDisabled;  


    }

    // half-chrome
    .oj-button-toggle.oj-button-half-chrome,                       
    .oj-button-toggle.oj-button-half-chrome:link,                  
    .oj-button-toggle.oj-button-half-chrome:visited,               
    .oj-button-toggle.oj-button-half-chrome:hover,                 
    .oj-button-toggle.oj-button-half-chrome:active,                
    .oj-button-nocomp.oj-button-half-chrome,                     // nocomp button only
    .oj-button-nocomp.oj-button-half-chrome:link,                // nocomp button only
    .oj-button-nocomp.oj-button-half-chrome:visited,             // nocomp button only
    .oj-button-nocomp.oj-button-half-chrome:hover,               // nocomp button only
    .oj-button-nocomp.oj-button-half-chrome:active,              // nocomp button only
    .oj-button.oj-button-half-chrome .oj-button-button,          // custom element only
    .oj-button.oj-button-half-chrome .oj-button-button:link,     // custom element only
    .oj-button.oj-button-half-chrome .oj-button-button:visited,  // custom element only
    .oj-button.oj-button-half-chrome .oj-button-button:hover,    // custom element only
    .oj-button.oj-button-half-chrome .oj-button-button:active {  // custom element only
        // can't set font-weight on oj-button-text class because oj-button-text 
        // not used on inputs of type button, submit, and reset

          font-weight: $buttonHalfChromeFontWeight;           

    }

    // half-chrome and (default or focus-only) icons
    .oj-button.oj-default.oj-button-half-chrome .oj-button-icon,    
    .oj-button-nocomp.oj-button-half-chrome .oj-button-icon,
    .oj-button.oj-focus-only.oj-button-half-chrome .oj-button-icon {

        color: $buttonHalfChromeIconColor;         

    }

    // half-chrome hover icons
    .oj-button.oj-hover.oj-button-half-chrome .oj-button-icon,
    .oj-button-nocomp.oj-button-half-chrome:hover .oj-button-icon {

        color: $buttonHalfChromeIconColorHover; 

    }

    // half-chrome active icons
    .oj-button.oj-active.oj-button-half-chrome .oj-button-icon,
    .oj-button-nocomp.oj-button-half-chrome:active .oj-button-icon {

        color: $buttonHalfChromeIconColorActive; 

    }

    // half-chrome selected icons
    .oj-button.oj-selected.oj-button-half-chrome .oj-button-icon {

        color: $buttonHalfChromeIconColorSelected; 

    }

    // half-chrome selected and hover icons
    .oj-button.oj-selected.oj-hover.oj-button-half-chrome .oj-button-icon {

        color: $buttonHalfChromeIconColorSelectedHover; 

    }

    // half-chrome disabled icons
    .oj-button.oj-disabled.oj-button-half-chrome .oj-button-icon,
    .oj-button-nocomp.oj-button-half-chrome:disabled .oj-button-icon {

        color: $buttonHalfChromeIconColorDisabled;

    }

    // half-chrome disabled selected icons
    // Unlike other occurrences of .oj-selected, this "disabled selected" rule has no corresponding "disabled active"
    // rule, since disabled buttons can't be active (pressed down by mouse/Space/Enter).
    .oj-button.oj-disabled.oj-selected.oj-button-half-chrome .oj-button-icon { // 7/2014:  need this line for specificity

        color: $buttonHalfChromeIconColorSelectedDisabled;

    }


    // Outlined buttons
    //----------------------------------


    /* Outlined buttons are similar to half-chrome buttons, but have a border in the default state. */
    
    // outlined and (default or focus-only or disabled)
    .oj-button-toggle.oj-default.oj-button-outlined-chrome,                 
    .oj-button-toggle.oj-focus-only.oj-button-outlined-chrome,              
    .oj-button-toggle.oj-disabled.oj-button-outlined-chrome,                
    .oj-button-nocomp.oj-button-outlined-chrome,                          // nocomp button only
    .oj-button-nocomp.oj-button-outlined-chrome:disabled,                 // nocomp button only
    .oj-button.oj-default.oj-button-outlined-chrome .oj-button-button,    // custom element only
    .oj-button.oj-focus-only.oj-button-outlined-chrome .oj-button-button, // custom element only
    .oj-button.oj-disabled.oj-button-outlined-chrome .oj-button-button {  // custom element only

        border-color: $buttonOutlinedChromeBorderColor;
        @include oj-background-image(none);
        @include oj-box-shadow(none);

        background-color: transparent;

    }

    // outlined and (default or focus-only)
    .oj-button-toggle.oj-default.oj-button-outlined-chrome,                   
    .oj-button-toggle.oj-focus-only.oj-button-outlined-chrome,                
    .oj-button-nocomp.oj-button-outlined-chrome,                            // nocomp button only
    .oj-button.oj-default.oj-button-outlined-chrome .oj-button-button,      // custom element only
    .oj-button.oj-focus-only.oj-button-outlined-chrome .oj-button-button {  // custom element only
        text-shadow: none;

          color: $buttonOutlinedChromeTextColor;          

    }

    // outlined hover
    .oj-button-toggle.oj-hover.oj-button-outlined-chrome,                
    .oj-button-nocomp.oj-button-outlined-chrome:hover,                 // nocomp button only
    .oj-button.oj-hover.oj-button-outlined-chrome .oj-button-button {  // custom element only

        color: $buttonOutlinedChromeTextColorHover;
        background-color: $buttonOutlinedChromeBgColorHover;
        border-color: $buttonOutlinedChromeBorderColorHover;
        @include oj-box-shadow(none);



    }

    // outlined active: should trump outlined hover
    .oj-button-toggle.oj-active.oj-button-outlined-chrome,                
    .oj-button-nocomp.oj-button-outlined-chrome:active,                 // nocomp button only
    .oj-button-nocomp.oj-active.oj-button-outlined-chrome,              // nocomp button only (enter key)
    .oj-button.oj-active.oj-button-outlined-chrome .oj-button-button {  // custom element only

        color: $buttonOutlinedChromeTextColorActive;
        background-color: $buttonOutlinedChromeBgColorActive;
        border-color: $buttonOutlinedChromeBorderColorActive;
        opacity: $buttonOutlinedChromeOpacityActive;
        @include oj-box-shadow(none);

    }

    // outlined selected
    .oj-button-toggle.oj-selected.oj-button-outlined-chrome,                
    .oj-button.oj-selected.oj-button-outlined-chrome .oj-button-button {  // custom element only

        color: $buttonOutlinedChromeTextColorSelected;
        background-color: $buttonOutlinedChromeBgColorSelected;
        border-color: $buttonOutlinedChromeBorderColorSelected;
        @include oj-box-shadow(none);

    }

    // outlined selected hover 
    .oj-button-toggle.oj-selected.oj-hover.oj-button-outlined-chrome,                
    .oj-button.oj-selected.oj-hover.oj-button-outlined-chrome .oj-button-button {  // custom element only

        color: $buttonOutlinedChromeTextColorSelectedHover;
        background-color: $buttonOutlinedChromeBgColorSelectedHover;
        border-color: $buttonOutlinedChromeBorderColorSelectedHover;


    }

    // outlined disabled
    .oj-button-toggle.oj-disabled.oj-button-outlined-chrome,                
    .oj-button-nocomp.oj-button-outlined-chrome:disabled,                 // nocomp button only
    .oj-button.oj-disabled.oj-button-outlined-chrome .oj-button-button {  // custom element only

        color: $buttonOutlinedChromeTextColorDisabled;
        border-color: $buttonOutlinedChromeBorderColorDisabled;
        opacity: $buttonOutlinedChromeOpacityDisabled;


    }

    // outlined disabled selected
    // Unlike other occurrences of .oj-selected, this "disabled selected" rule has no corresponding "disabled active"
    // rule, since disabled buttons can't be active (pressed down by mouse/Space/Enter).
    // 6/2014:  still need this line for specificity
    .oj-button-toggle.oj-disabled.oj-selected.oj-button-outlined-chrome,                
    .oj-button.oj-disabled.oj-selected.oj-button-outlined-chrome .oj-button-button {  // custom element only

        color: $buttonOutlinedChromeTextColorSelectedDisabled;
        background-color: $buttonOutlinedChromeBgColorSelectedDisabled;
        border-color: $buttonOutlinedChromeBorderColorSelectedDisabled;


    }

    // outlined
    .oj-button-toggle.oj-button-outlined-chrome,                       
    .oj-button-toggle.oj-button-outlined-chrome:link,                  
    .oj-button-toggle.oj-button-outlined-chrome:visited,               
    .oj-button-toggle.oj-button-outlined-chrome:hover,                 
    .oj-button-toggle.oj-button-outlined-chrome:active,                
    .oj-button-nocomp.oj-button-outlined-chrome,                     // nocomp button only
    .oj-button-nocomp.oj-button-outlined-chrome:link,                // nocomp button only
    .oj-button-nocomp.oj-button-outlined-chrome:visited,             // nocomp button only
    .oj-button-nocomp.oj-button-outlined-chrome:hover,               // nocomp button only
    .oj-button-nocomp.oj-button-outlined-chrome:active,              // nocomp button only
    .oj-button.oj-button-outlined-chrome .oj-button-button,          // custom element only
    .oj-button.oj-button-outlined-chrome .oj-button-button:link,     // custom element only
    .oj-button.oj-button-outlined-chrome .oj-button-button:visited,  // custom element only
    .oj-button.oj-button-outlined-chrome .oj-button-button:hover,    // custom element only
    .oj-button.oj-button-outlined-chrome .oj-button-button:active {  // custom element only
        // can't set font-weight on oj-button-text class because oj-button-text 
        // not used on inputs of type button, submit, and reset

          font-weight: $buttonOutlinedChromeFontWeight

    }

    // outlined and (default or focus-only) icons
    .oj-button.oj-default.oj-button-outlined-chrome .oj-button-icon,    
    .oj-button-nocomp.oj-button-outlined-chrome .oj-button-icon,
    .oj-button.oj-focus-only.oj-button-outlined-chrome .oj-button-icon {

        color: $buttonOutlinedChromeIconColor;         

    }

    // outlined hover icons
    .oj-button.oj-hover.oj-button-outlined-chrome .oj-button-icon,
    .oj-button-nocomp.oj-button-outlined-chrome:hover .oj-button-icon {

        color: $buttonOutlinedChromeIconColorHover; 

    }

    // outlined active icons
    .oj-button.oj-active.oj-button-outlined-chrome .oj-button-icon,
    .oj-button-nocomp.oj-button-outlined-chrome:active .oj-button-icon {

        color: $buttonOutlinedChromeIconColorActive; 

    }

    // outlined selected icons
    .oj-button.oj-selected.oj-button-outlined-chrome .oj-button-icon {

        color: $buttonOutlinedChromeIconColorSelected; 

    }

    // outlined selected and hover icons
    .oj-button.oj-selected.oj-hover.oj-button-outlined-chrome .oj-button-icon {

        color: $buttonOutlinedChromeIconColorSelectedHover; 

    }

    // outlined disabled icons
    .oj-button.oj-disabled.oj-button-outlined-chrome .oj-button-icon,
    .oj-button-nocomp.oj-button-outlined-chrome:disabled .oj-button-icon {

        color: $buttonOutlinedChromeIconColorDisabled; 

    } 

    // outlined disabled selected icons
    // Unlike other occurrences of .oj-selected, this "disabled selected" rule has no corresponding "disabled active"
    // rule, since disabled buttons can't be active (pressed down by mouse/Space/Enter).
    .oj-button.oj-disabled.oj-selected.oj-button-outlined-chrome .oj-button-icon { // 7/2014:  need this line for specificity

        color: $buttonOutlinedChromeIconColorSelectedDisabled;        

    }

    // Call To Action chrome buttons
    //----------------------------------


    /* Call To Action (CTA) chrome button guides the user to take or complete the action that is the main goal of the page or page section.
     * There should only be one CTA button on a page at any given time.
     * cta-chrome buttons have chrome (background and border) in all states (default,
     * focus-only, disabled, hover, active ...).
     * selected states do not apply since CTA buttons are Push Buttons only
     */

     .oj-button-toggle.oj-button-cta-chrome,                       
     .oj-button-toggle.oj-button-cta-chrome:link,                  
     .oj-button-toggle.oj-button-cta-chrome:visited,               
     .oj-button-toggle.oj-button-cta-chrome:hover,                 
     .oj-button-toggle.oj-button-cta-chrome:active,                
     .oj-button-nocomp.oj-button-cta-chrome,                     // nocomp button only
     .oj-button-nocomp.oj-button-cta-chrome:link,                // nocomp button only
     .oj-button-nocomp.oj-button-cta-chrome:visited,             // nocomp button only
     .oj-button-nocomp.oj-button-cta-chrome:hover,               // nocomp button only
     .oj-button-nocomp.oj-button-cta-chrome:active,              // nocomp button only
     .oj-button.oj-button-cta-chrome .oj-button-button,          // custom element only
     .oj-button.oj-button-cta-chrome .oj-button-button:link,     // custom element only
     .oj-button.oj-button-cta-chrome .oj-button-button:visited,  // custom element only
     .oj-button.oj-button-cta-chrome .oj-button-button:hover,    // custom element only
     .oj-button.oj-button-cta-chrome .oj-button-button:active {  // custom element only
         // can't set font-weight on oj-button-text class because oj-button-text 
         // not used on inputs of type button, submit, and reset
 
           font-weight: $buttonFontWeight;          
 
     }
 
     /* oj-default is applied iff the button is not in any of the other states, 
        namely oj-active, oj-disabled, oj-hover, or oj-focus.
        oj-focus-only is applied iff the button has oj-focus but not any of the other 4 states listed above.*/
     .oj-button-toggle.oj-default.oj-button-cta-chrome,                   
     .oj-button-toggle.oj-focus-only.oj-button-cta-chrome,                
     .oj-button-nocomp.oj-button-cta-chrome,                            // nocomp button only
     .oj-button.oj-default.oj-button-cta-chrome .oj-button-button,      // custom element only
     .oj-button.oj-focus-only.oj-button-cta-chrome .oj-button-button {  // custom element only
 
         background-color: $buttonCallToActionChromeBgColor; 
         @include oj-background-image($buttonCallToActionChromeBgImage);
         border-color: $buttonCallToActionChromeBorderColor;
         color: $buttonCallToActionChromeTextColor;
         @include oj-box-shadow($buttonCallToActionChromeBoxShadow);
         // can't set text-shadow on oj-button-text class because oj-button-text
         // not used on inputs of type button, submit, and reset
         text-shadow: $buttonTextShadow ;
 
     }
 
     .oj-button.oj-default.oj-button-cta-chrome .oj-button-icon,
     .oj-button-nocomp.oj-button-cta-chrome .oj-button-icon,
     .oj-button.oj-focus-only.oj-button-cta-chrome .oj-button-icon {
 
 
         color: $buttonCallToActionChromeIconColor;         
 
     }
 
     .oj-button-toggle.oj-hover.oj-button-cta-chrome,                
     .oj-button-nocomp.oj-button-cta-chrome:hover,                 // nocomp button only
     .oj-button.oj-hover.oj-button-cta-chrome .oj-button-button {  // custom element only
 
         background-color: $buttonCallToActionChromeBgColorHover;
         @include oj-background-image($buttonCallToActionChromeBgImageHover);
         border-color: $buttonCallToActionChromeBorderColorHover;
         color: $buttonCallToActionChromeTextColorHover;
         @include oj-box-shadow($buttonCallToActionChromeBoxShadowHover);
         // can't set text-shadow on oj-button-text class because oj-button-text
         // not used on inputs of type button, submit, and reset
         text-shadow: $buttonTextShadowHover;
 
     }
 
     .oj-button.oj-hover.oj-button-cta-chrome .oj-button-icon,
     .oj-button-nocomp.oj-button-cta-chrome:hover .oj-button-icon {
 
         color: $buttonCallToActionChromeIconColorHover;         
 
     }
 
     // active should trump hover
     /* oj-active is applied to a push button when it is actively being held down 
        by the mouse button or Enter or Spacebar. */
     .oj-button-toggle.oj-active.oj-button-cta-chrome,                
     .oj-button-nocomp.oj-button-cta-chrome:active,                 // nocomp button only
     .oj-button-nocomp.oj-active.oj-button-cta-chrome,                 // nocomp button only (enter key)
     .oj-button.oj-active.oj-button-cta-chrome .oj-button-button {  // custom element only
 
         background-color: $buttonCallToActionChromeBgColorActive;
         @include oj-background-image($buttonCallToActionChromeBgImageActive);
         border-color: $buttonCallToActionChromeBorderColorActive;
         color: $buttonCallToActionChromeTextColorActive;
         @include oj-box-shadow($buttonCallToActionChromeBoxShadowActive);
         // can't set text-shadow on oj-button-text class because oj-button-text
         // not used on inputs of type button, submit, and reset
         text-shadow: $buttonTextShadowActive;
         opacity: $buttonCallToActionChromeOpacityActive;
 
     }
 
     // active should trump hover
     .oj-button.oj-active.oj-button-cta-chrome .oj-button-icon,
     .oj-button-nocomp.oj-button-cta-chrome:active .oj-button-icon,
     .oj-button-nocomp.oj-active.oj-button-cta-chrome .oj-button-icon {
 
         color: $buttonCallToActionChromeIconColorActive;         
 
     }
 
     .oj-button-toggle.oj-disabled.oj-button-cta-chrome,                
     .oj-button-nocomp.oj-button-cta-chrome:disabled,                 // nocomp button only
     .oj-button.oj-disabled.oj-button-cta-chrome .oj-button-button {  // custom element only
 
         background-color: $buttonCallToActionChromeBgColorDisabled;
         border-color: $buttonCallToActionChromeBorderColorDisabled;
         color: $buttonCallToActionChromeTextColorDisabled;
         @include oj-box-shadow($buttonCallToActionChromeBoxShadowDisabled); 
         opacity: $buttonCallToActionChromeOpacityDisabled;
         @include oj-background-image(none);
 
     }
 
     .oj-button.oj-disabled.oj-button-cta-chrome .oj-button-icon,
     .oj-button-nocomp.oj-button-cta-chrome:disabled .oj-button-icon  {
 
         color: $buttonCallToActionChromeIconColorDisabled;         
 
     }


    // Button padding and alignment
    //----------------------------------

      @include oj-button-padding();
      @include oj-button-padding('.oj-button-sm', 
                                 $buttonSmallIconOnlyPadding, 
                                 $buttonSmallTextToEdgePadding, 
                                 $buttonSmallIconToEdgePadding, 
                                 $buttonSmallIconToTextPadding);
      @include oj-button-padding('.oj-button-lg', 
                                 $buttonLargeIconOnlyPadding, 
                                 $buttonLargeTextToEdgePadding, 
                                 $buttonLargeIconToEdgePadding,
                                 $buttonLargeIconToTextPadding);
      @include oj-button-padding('.oj-button-xl',
                                 $buttonXlargeIconOnlyPadding,
                                 $buttonXlargeTextToEdgePadding, 
                                 $buttonXlargeIconToEdgePadding,
                                 $buttonXlargeIconToTextPadding);



    
    // Workarounds
    //----------------------------------
    

    /* reset extra padding in Firefox, see h5bp.com/1 */
    input.oj-button::-moz-focus-inner,
    button.oj-button::-moz-focus-inner, 
    .oj-button button::-moz-focus-inner { 
        border: 0; 
        padding: 0; 
    }


    // High Contrast
    //------------------------------------


    // in high contrast mode bump up the focus outline size to 
    // make it easier to see
    .oj-hicontrast .oj-button-toggle.oj-focus,                
    .oj-hicontrast .oj-button.oj-focus .oj-button-button {  // custom element only
      outline-width: 3px;
    }

    // a selected button will have a more prominent border
    .oj-hicontrast .oj-button-toggle.oj-selected,                
    .oj-hicontrast .oj-button.oj-selected .oj-button-button {  // custom element only
      border-style: double;
      border-width: 3px;
    }

    // a disabled button will have a less prominent border
    .oj-hicontrast .oj-button-toggle.oj-disabled,                
    .oj-hicontrast .oj-button.oj-disabled .oj-button-button {  // custom element only
      border-style: dotted;
    }

    .oj-hicontrast .oj-button-toggle.oj-disabled.oj-selected,                
    .oj-hicontrast .oj-button.oj-disabled.oj-selected .oj-button-button {  // custom element only
      border-width: 2px;
    }


    /* menu buttons */

    .oj-button-menu-dropdown-icon,
    .oj-button-menu-icon-only-dropdown-icon {
        @extend .oj-fwk-icon-arrow02-s;
    }

     // alternate button colors
     //----------------------------------
     .oj-button-primary {
       @if $buttonPrimaryColor != null {
         @include oj-button-alt($altBgColor: $buttonPrimaryColor,
                                $altTextColor: $buttonContrastTextColor);
       }
     }
     .oj-button-confirm {
       @if $buttonConfirmColor != null {
         @include oj-button-alt($altBgColor: $buttonConfirmColor,
                                $altTextColor: $buttonContrastTextColor);
       }
     }


  }
}