/**
 * @file
 * Structural styles for 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. Allow full range of styling in Webkit and Gecko.
 * 4. Use pixel units to ensure button text is centered vertically.
 * 5. Use rems to avoid the font size cascade of ems, with a pixel fallback for
 *    older browsers.
 * 6. Prevent fat text in WebKit.
 *
 */
.button:not(.button--danger, .js-hide) {
  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 hsl(0, 0%, 100%, 0.6);
  font-size: 14px;
  font-size: 0.875rem; /* 5 */
  font-weight: 600;
  line-height: normal; /* 2 */
  -webkit-appearance: none; /* 3 */
  -moz-appearance: none; /* 3 */
  -webkit-font-smoothing: antialiased; /* 6 */
}

.button:hover:not(.button--danger),
.button:focus:not(.button--danger) {
  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);
  font-weight: 600;
}

.button.button--danger:hover,
.button.button--danger:focus {
  font-weight: normal;
}

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

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

.button:active:not(.button--danger) {
  -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 hsl(0, 0%, 0%, 0.2);
}

.button.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 hsl(0, 0%, 0%, 0.5);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  &:hover,
  &: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);
  }
  &:focus {
    border: 1px solid #1280df;
  }
  &:hover {
    box-shadow: 0 1px 2px hsl(203, 10%, 10%, 0.25);
  }
  &: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 hsl(0, 0%, 0%, 0.2);
  }
}

/**
 * Override styling from system.theme.
 */
.button-action::before {
  margin-left: -0.2em; /* LTR */
  padding-right: 0.2em; /* LTR */
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 16px;
  -webkit-font-smoothing: auto;
  [dir="rtl"] & {
    margin-right: -0.2em;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0.2em;
  }
}

/**
 * Use pixels 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 hsl(0, 0%, 100%, 0.6);
  font-weight: normal;
}

/**
 * Style a clickable/tappable element as a link. Duplicate 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;
  &:hover,
  &:focus {
    text-decoration: underline;
    color: #008ee6;
  }
}

.button--danger {
  color: #c72100;
  &:hover,
  &:focus,
  &:active {
    text-decoration: underline;
  }
  &:disabled,
  &.is-disabled {
    text-decoration: none;
    color: #737373;
    background: none;
    -webkit-font-smoothing: antialiased;
  }
}
