/**
 * Rules for buttons:
 *
 * Buttons must always be either <button /> elements or <a /> elements
 * with one of the relevant classes (ideally, meapp-button; ui-btn is a 
 * legacy class that will be removed in the future.
 *
 * Each individual button element should always be contained in a
 * div.meapp-button-container, which at the same time should always be
 * a div.meapp-form-item.
 *
 * Groups of buttons (including isolated buttons) should also be
 * contained inside div.meapp-form-buttons (note the plural!), which
 * should *also* be meapp-form-items.
 *
 * TODO: Figure out how to deal with the meapp-form-item class here!
 *
 * Therefore, the prototypical (reduced) button group looks like this:
 *
 * ::
 *
 *     <div class="meapp-form-buttons meapp-form-item">
 *       <div class="meapp-button-container meapp-form-item">
 *         <button class="meapp-button">...</button>
 *       </div>
 *       <div class="meapp-button-container meapp-form-item">
 *         <a class="meapp-button">...</a>
 *       </div>
 *     </div>
 */


/**
 * Container for (potentially) *more than one* button
 */
.meapp-button-container {
  margin: 0;
  position: relative;
	text-align: center;
	vertical-align: middle;
}

/**
 * Button details, and defaults
 */
.meapp-button, 
a.ui-btn /* Legacy button class */ {
	position: relative;
  text-decoration: none;
  background-color: rgb(205, 199, 200);
  color: white;
  border: 1px solid rgb(205, 199, 200);
  font-size: 1.1rem;
  line-height: 1.1rem;
	margin: 0;
	padding: 10px;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

/**
 * Additional rule for legacy button *content*
 * TODO: Verify this!
 */
a.ui-btn span /* Legacy button class */ {
	color: #fff;
	position: relative;
	z-index: 1;
}

/* Assume this is the weird effect, removed; TODO: Verify
.meapp-button::before,
a.ui-btn::before {
	content: '';
	position: absolute;
	background: #071017;
	border: 50vh solid #1d4567;
	width: 30vh;
	height: 30vh;
	border-radius: 50%;
	display: block;
	top: 50%;
	left: 50%;
	z-index: 0;
	opacity: 1;
	-webkit-transform: translate(-50%, -50%) scale(0);
		  transform: translate(-50%, -50%) scale(0);
}
.meapp-button:active::before, 
.meapp-button:focus::before,
a.ui-btn:focus::before {
	-webkit-transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
	transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
	transition: transform 1.12s ease, opacity 0.28s ease 0.364s;
	transition: transform 1.12s ease, opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
	-webkit-transform: translate(-50%, -50%) scale(1);
		  transform: translate(-50%, -50%) scale(1);
	opacity: 0;
}
*/

/**
 * Interactions with buttons:
 */
.meapp-button:hover,
a.ui-btn:hover /* Legacy button class */ {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}
.meapp-button:focus,
a.ui-btn:focus /* Legacy button class */ {
	outline: none;
  text-decoration: none;
}

/**
 * The following two classes cause of lot of friction, be sure
 * to treat them as a single unit!
 * XXX REDUNDANT
.meapp-form-buttons .meapp-button-container {
	/ Context: Previous + Save & Cancel /
	display: inline-block;
}
*/
.meapp-form-buttons .meapp-button-container.pull-left {
	float: left; /* previous button! */
}

/**
 * Primary form submit buttons (save, next, ...)
 */
input[type=submit],
a.ui-btn.success,
a.ui-btn.next_awpb_item,
a.ui-btn.save_awpb_item,
button.success /* Legacy class */ {
  background-color: rgb(78, 173, 75); /* #4E6D8D; */
  border: 1px solid rgb(58, 153, 25); /* #4e6d8d; */
}

/* TODO: Consolidate and move these! */
.meapp-button {
	white-space: nowrap;
  display: block;
}
.meapp-button-container {
	display: inline-block;
}

a.primary,
button.primary {
  background-color: #4E6D8D;
  border: 1px solid #4e6d8d;
}