/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/2815083
 * @preserve
 */

/**
 * @file
 * Structural styles for Claro's UI buttons
 *
 * Apply these classes to button elements (<button>, <input type="button" />).
 */

:root {
  /*
   * Color Palette.
   */
  /* Secondary. */
  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
  /*
   * Base.
   */
  /*
   * Typography.
   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
  /**
   * Spaces.
   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
  /*
   * Common.
   */
  /*
   * Inputs.
   */ /* Absolute zero with opacity. */ /* Davy's grey with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
  /*
   * Details.
   */
  /**
   * Buttons.
   */
  /**
   * jQuery.UI dropdown.
   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
  /**
   * Progress bar.
   */
  /**
   * Tabledrag icon size.
   */ /* 17px */
  /**
   * Ajax progress.
   */
  /**
   * Breadcrumb.
   */
}

/**
 * Buttons.
 *
 * 1. Padding widths detracted by width of the transparent borders to make
 *    button size match with design system.
 * 2. Transparent border is needed for high contrast mode. This has to be set to
 *    !important to render Firefox borders with consistent width in high
 *    contrast mode.
 * 3. Prevent fat text in WebKit.
 *
 * @todo Consider moving box-sizing into base.css under a universal selector.
 * See https://www.drupal.org/node/2124251
 */

/**
 * Base button styles.
 *
 * These styles have been duplicated to dropbutton.css and action-links.css
 * since those components inherits most of these design elements. Whenever
 * making changes to this file, remember to check if that needs to be applied to
 * dropbutton.css or action-links.css as well.
 */

.button {
  display: inline-block;
  margin: 1rem 0.75rem 1rem 0; /* LTR */
  padding: calc(1rem - 1px) calc(1.5rem - 1px); /* 1 */
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: #222330;
  border: 1px solid transparent !important;  /* 2 */
  border-radius: 2px;
  background-color: #d4d4d8;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;  /* 3 */
}

[dir="rtl"] .button {
  margin: 1rem 0 1rem 0.75rem;
}

.button:not(:focus) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.button:hover {
  text-decoration: none;
  background-color: #c2c3ca;
}

.button:focus {
  text-decoration: none;
}

.button:active {
  background-color: #adaeb3;
}

/* Common styles for small buttons */

.no-touchevents .button--small {
  margin: 0.75rem 0.5rem 0.75rem 0; /* LTR */
  padding: calc(0.5rem - 1px) calc(1rem - 1px); /* 1 */
  font-size: 0.79rem;
}

/* Common styles for extra small buttons */

.no-touchevents .button--extrasmall {
  margin: 0.5rem 0.5rem 0.5rem 0; /* LTR */
  padding: calc(0.25rem - 1px) calc(0.75rem - 1px); /* 1 */
  font-size: 0.79rem;
}

[dir="rtl"].no-touchevents .button--small,
[dir="rtl"].no-touchevents .button--extrasmall {
  margin-right: 0;
  margin-left: 0.5rem;
}

/* Styles for action link buttons */

.button--action {
  margin: 0;
}

.button--action::before {
  margin-left: -0.25em; /* LTR */
  padding-right: 0.25em; /* LTR */
  content: "+";
  font-weight: 900;
}

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

/* Primary button styles */

.button--primary {
  color: #fff;
  background-color: #003cc5;
}

.button--primary:hover {
  color: #fff;
  background-color: #0036b1;
}

.button--primary:active {
  background-color: #00339a;
}

/* Danger button styles */

.button--danger {
  color: #fff;
  background-color: #d72222;
}

.button--danger:hover {
  color: #fff;
  background-color: #c11f1f;
}

.button--danger:active {
  background-color: #ab1b1b;
}

/**
 * Disabled state styles as last.
 *
 * Overrides every definitions before, including variants.
 */

.button:disabled,
.button.is-disabled {
  color: #8e929c;
  background-color: #ebebed;
}

.button--primary:disabled,
.button--primary.is-disabled {
  color: #82828c;
  background-color: #d4d4d8;
}

/* Make disabled <link> behave like a [disabled] <input> or <button> */

.button.is-disabled {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

/**
 * 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: underline;
  border: 0;
  background: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}