/** Import Compass */
/******************************************************************************
Sprite Mixin
******************************************************************************/
/******************************************************************************
Extendible Sprite Class
******************************************************************************/
/* ========================================================================== Buttons ========================================================================== */
/** Core Button Component This is a core button component.  This only contains the relevant structural styles necessary to render a button.  This class can be applied to buttons, links, or input buttons. Example HTML: <button class="a-Button [modifiers]" type="submit">Button Label</button> <a class="a-Button [modifiers]" href="#" role="button">Button Label</a> <input class="a-Button [modifiers]" type="submit" value="Button Label"> */
/** Button 1. Use proper box-model for button sizing across all browsers 2. Reset webkit based browser appearance 3. Inherit text color from ancestor 4. Inherit font from ancestor 5. Normalize line-height 6. Prevent text selection on buttons 7. Prevent wrapping of text in buttons */
.a-Button, .u-Button { -webkit-appearance: none; /* 2 */ background: transparent; border: 1px solid; color: inherit; /* 3 */ cursor: pointer; display: inline-block; font: inherit; /* 4 */ line-height: normal; /* 5 */ margin: 0; padding: 4px 12px; position: relative; text-align: center; text-decoration: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; /* 6 */ vertical-align: middle; white-space: nowrap; /* 7 */ }

/** Hover, Focus and Click States */
.a-Button:hover, .a-Button:focus, .a-Button:active { text-decoration: none; }

.a-Button:focus, .apex-button-group input:focus + label { outline: 1px dotted; }

/** Disabled States */
.a-Button:disabled, .a-Button.is-disabled, button:disabled, .apex-button-group input:disabled + label { cursor: default; opacity: .5; pointer-events: none; }

/** Firefox padding / border issue */
.a-Button::-moz-focus-inner { border: 0; padding: 0; }

/** Full Width Button */
.a-Button--full, .a-Button--stretch { width: 100%; }

/** Pill Buttons */
.a-Button--pillStart { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

.a-Button--pillEnd { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

.a-Button--pillStart + .a-Button--pillEnd, .a-Button--pillStart + .a-Button--pill { margin-left: -1px !important; }

.a-Button--pill { border-radius: 0 !important; margin-right: -1px; margin-left: 0 !important; }

.a-Button--pill + .a-Button--pillEnd { margin-left: 0 !important; }

.a-Button--padLeft { margin-left: 4px !important; }

.a-Button--padRight { margin-right: 4px !important; }

.a-Button--gapLeft { margin-left: 12px !important; }

.a-Button--gapRight { margin-right: 12px !important; }

.a-Button--gapRight + .a-Button { margin-left: 0 !important; }

.a-Button--shuttle { display: block; margin: 4px; }

/* ========================================================================== Button Group  HTML: <fieldset tabindex="-1" id="YES_NO" class="apex-button-group apex-item-yes-no"> <legend class="u-VisuallyHidden">Yes No</legend> <input type="radio" id="YES_NO_0" name="YES_NO" value="Y"> <label for="YES_NO_0" class="a-Button">Yes</label> <input type="radio" id="YES_NO_1" name="YES_NO" value="N"> <label for="YES_NO_1" class="a-Button">No</label> </fieldset> ========================================================================== */
/* APEX  Yes No Item Type ========================================================================== */
.apex-item-yes-no:focus { outline: none; }

/* Button Group Base Styles ========================================================================== */
.apex-button-group input { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

.apex-button-group input:checked + label { display: inline-block; vertical-align: top; font-weight: bold; background-color: #D0D0D0; z-index: 1; position: relative; }

.apex-button-group label { margin-right: -1px; min-width: 48px; white-space: nowrap; text-align: center; }

.u-RTL .apex-button-group label { margin-right: 0; margin-left: -1px; }

.apex-button-group .apex-item-option:first-of-type label { border-radius: 2px 0 0 2px; }

.u-RTL .apex-button-group .apex-item-option:first-of-type label { border-radius: 0 2px 2px 0; }

.apex-button-group .apex-item-option:last-of-type label { margin-right: 0; border-radius: 0 2px 2px 0; }

.u-RTL .apex-button-group .apex-item-option:last-of-type label { border-radius: 2px 0 0 2px; }

.apex-button-group .apex-item-option:only-of-type label { border-radius: 2px; }

/* Notification Button ========================================================================== */
.a-Button.a-Button--notification { padding: 4px 8px; margin-left: 4px; background-color: transparent; box-shadow: none; }

.u-RTL .a-Button.a-Button--notification { margin-left: 0; margin-right: 4px; }