/**
 * @file
 * Structural styles for Seven’s UI buttons
 *
 * Apply these classes to any element (<link>, <button>, <input>, etc.) that
 * should appear as a button.
 */

/**
 * Buttons.
 *
 * 1. Enable z-index on buttons.
 * 2. Normalize 'line-height'; can’t be changed from 'normal' in Firefox 4+.
 * 3. Allows full range of styling in Webkit and Gecko.
 * 4. Use px units to ensure button text is centered vertically.
 * 5. Use rems to avoid the font size cascade of ems, with a px fallback for
 *    older browsers.
 * 6. Prevent fat text in WebKit.
 *
 * @todo Consider moving box-sizing into base.css under a universal selector.
 * See https://www.drupal.org/node/2124251
 *
 */
.button {
  position              : relative;
  /* 1 */
  display               : inline-block;
  box-sizing            : border-box;
  padding               : 4px 1.5em;
  /* 4 */
  cursor                : pointer;
  -webkit-transition    : all 0.1s;
  transition            : all 0.1s;
  text-align            : center;
  text-decoration       : none;
  color                 : #333;
  border                : 1px solid #a6a6a6;
  border-radius         : 20em;
  background-color      : #f2f1eb;
  background-image      : -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
  background-image      : linear-gradient(to bottom, #f6f6f3, #e7e7df);
  text-shadow           : 0 1px hsla(0, 0%, 100%, 0.6);
  font-size             : 14px;
  /* font-size          : 0.875rem;   */
  font-weight           : 600;
  line-height           : normal;
  /* 2 */
  -webkit-appearance    : none;
  /* 3 */
  -moz-appearance       : none;
  /* 3 */
  -webkit-font-smoothing: antialiased;
  /* 6 */
}

.button:hover,
.button:focus {
  text-decoration : none;
  color           : #1a1a1a;
  outline         : none;
  background-color: #f9f8f6;
  background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
  background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
}

.button:hover {
  box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
}

/* Prevent focus ring being covered by next siblings. */
.button:focus {
  z-index   : 10;
  border    : 1px solid #3ab2ff;
  box-shadow: 0 0 0.5em 0.1em hsla(203, 100%, 60%, 0.7);
}

.button:active {
  -webkit-transition: none;
  transition        : none;
  border            : 1px solid #a6a6a6;
  background-color  : #dfdfd9;
  background-image  : -webkit-linear-gradient(top, #f6f6f3, #e7e7df);
  background-image  : linear-gradient(to bottom, #f6f6f3, #e7e7df);
  box-shadow        : inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
}

.button--primary {
  color                 : #fff;
  border-color          : #1e5c90;
  background-color      : #0071b8;
  background-image      : -webkit-linear-gradient(top, #007bc6, #0071b8);
  background-image      : linear-gradient(to bottom, #007bc6, #0071b8);
  text-shadow           : 0 1px hsla(0, 0%, 0%, 0.5);
  font-weight           : 700;
  -webkit-font-smoothing: antialiased;
}

.button--primary:hover,
.button--primary:focus {
  color           : #fff;
  border-color    : #1e5c90;
  background-color: #2369a6;
  background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
  background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
}

.button--primary:focus {
  border: 1px solid #1280df;
}

.button--primary:hover {
  box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
}

.button--primary:active {
  border-color    : #144b78;
  background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
  background-image: linear-gradient(to bottom, #08639b, #0071b8);
  box-shadow      : inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
}

/**
 * Overrides styling from system.theme.
 */
.button-action:before {
  margin-left              : -0.2em;
  /* LTR */
  padding-right            : 0.2em;
  /* LTR */
  font-size                : 14px;
  /* font-size             : 0.875rem; */
  line-height              : 16px;
  -webkit-font-smoothing   : auto;
}

[dir="rtl"] .button-action:before {
  margin-right : -0.2em;
  margin-left  : 0;
  padding-right: 0;
  padding-left : 0.2em;
}

/**
 * 1. Use px units to ensure button text is centered vertically.
 */
.no-touchevents .button--small {
  padding  : 2px 1em;
  /* 1 */
  font-size: 13px;
  font-size: 0.813rem;
}

.button:disabled,
.button:disabled:active,
.button.is-disabled,
.button.is-disabled:active {
  cursor      : default;
  color       : #5c5c5c;
  border-color: #d4d4d4;
  background  : #ededed;
  box-shadow  : none;
  text-shadow : 0 1px hsla(0, 0%, 100%, 0.6);
  font-weight : normal;
}

/* Link actions. */

/**
 * Style a clickable/tappable element as a link. Duplicates the base style for
 * the <a> tag, plus a reset for padding, borders and background.
 */
.link {
  display           : inline;
  padding           : 0;
  cursor            : pointer;
  text-decoration   : none;
  color             : #0074bd;
  border            : 0;
  background        : none;
  -webkit-appearance: none;
  -moz-appearance   : none;
}

.link:hover,
.link:focus {
  text-decoration: underline;
  color          : #008ee6;
}

/**
 * We've temporarily added the danger button here, bit of a harsh reset but we
 * need it.
 * @todo replace with link--danger.
 * See https://www.drupal.org/node/2123731
 */
.button--danger {
  display           : inline;
  padding           : 0;
  cursor            : pointer;
  text-decoration   : underline;
  color             : #c72100;
  border            : 0;
  border-radius     : 0;
  background        : none;
  box-shadow        : none;
  font-weight       : 400;
  -webkit-appearance: none;
  -moz-appearance   : none;
}

.button--danger:hover,
.button--danger:focus,
.button--danger:active {
  padding        : 0;
  text-decoration: underline;
  color          : #ff2a00;
  border         : 0;
  background     : none;
  box-shadow     : none;
  text-shadow    : none;
}

.button--danger:disabled,
.button--danger.is-disabled {
  padding               : 0;
  cursor                : default;
  text-decoration       : none;
  color                 : #737373;
  border                : 0;
  background            : none;
  box-shadow            : none;
  -webkit-font-smoothing: antialiased;
}