/**
 * @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 {
  box-sizing: border-box;
  display: inline-block;
  position: relative;  /* 1 */
  text-align: center;
  line-height: normal;  /* 2 */
  cursor: pointer;
  -webkit-appearance: none;  /* 3 */
  -moz-appearance: none;  /* 3 */
  padding: 5px 2em;  /* 4 */
  border: 1px solid $button-border;
  border-radius: 2px;
  background: $button-bg;
  color: #fff;
  text-decoration: none;
  font-size: 0.875rem;  /* 5 */
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
  -webkit-font-smoothing: antialiased;  /* 6 */
  box-shadow: $button-box-shadow;

  &:hover, &:focus {
    background-color: $button-bg-hover;
    text-decoration: none;
    outline: none;
  }

  &:focus {
    z-index: 10;
    box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2);
    // border: 1px solid #3AB2FF;
    // box-shadow: 0 0 0 1px $brand-primary;
  }

  &:active {
    -webkit-transition: none;
    transition: none;
  }
}

// .button--primary {
//   border-color: #1e5c90;
//   background-color: #0071b8;
//   background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
//   background-image:   linear-gradient(to bottom, #007bc6, #0071b8);
//   color: #fff;
//   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
//   font-weight: 700;
//   -webkit-font-smoothing: antialiased;
// }
// .button--primary:hover,
// .button--primary:focus {
//   background-color: #2369a6;
//   background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
//   background-image:   linear-gradient(to bottom, #0c97ed, #1f86c7);
//   border-color: #1e5c90;
//   color: #fff;
// }
// .button--primary:focus {
//   border: 1px solid #1280DF;
// }
// .button--primary:hover {
//   box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
// }
// .button--primary:active {
//   background-image: -webkit-linear-gradient(top, #08639b, #0071b8);
//   background-image:   linear-gradient(to bottom, #08639b, #0071b8);
//   border-color: #144b78;
//   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 {
  font-size: 13px;
  font-size: 0.813rem;
  padding: 2px 1em;  /* 1 */
}

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

/* 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;
  cursor: pointer;
  padding: 0;
  border: 0;
  background: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: #0074bd;
  text-decoration: none;
}
.link:hover,
.link:focus {
  color: #008ee6;
  text-decoration: underline;
}

/**
 * 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;
//   cursor: pointer;
//   padding: 0;
//   border-radius: 0;
//   box-shadow: none;
//   text-decoration: underline;

//   border-color: #1e5c90;
//   background-color: #0071b8;
//   background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
//   background-image:   linear-gradient(to bottom, #007bc6, #0071b8);
//   color: #fff;
//   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
//   font-weight: 700;
//   -webkit-font-smoothing: antialiased;
// }
// .button--danger:hover,
// .button--danger:focus,
// .button--danger:active {
//   color: #ff2a00;
//   text-decoration: underline;
//   text-shadow: none;
//   padding: 0;
//   border: 0;
//   box-shadow: none;
//   background: none;
// }
// .button--danger:disabled,
// .button--danger.is-disabled {
//   color: #737373;
//   cursor: default;
//   text-decoration: none;
//   -webkit-font-smoothing: antialiased;
//   padding: 0;
//   border: 0;
//   box-shadow: none;
//   background: none;
// }