button.css

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

/**
 * @file
 * Structural styles for Claro's UI buttons
 *
 * Apply these classes to button elements (, ).
 */

/**
 * Buttons.
 *
 * 1. Padding widths detracted by width of the transparent borders to make
 *    button size match with design system.
 * 2. 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-block: var(--space-m);
  margin-inline: 0 var(--space-s);
  padding: calc(var(--space-m) - 1px) calc(var(--space-l) - 1px); /* 1 */
  cursor: pointer;
  text-align: center;
  -webkit-text-decoration: none;
  text-decoration: none;
  color: var(--button-fg-color);
  border: 1px solid transparent;
  border-radius: var(--button-border-radius-size);
  background-color: var(--button-bg-color);
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 1rem;
  appearance: none;
  -webkit-font-smoothing: antialiased; /* 2 */
}

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

.button:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: var(--button-fg-color);
  background-color: var(--button--hover-bg-color);
}

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

.button:active {
  background-color: var(--button--active-bg-color);
}

/* Common styles for small buttons. */

.no-touchevents .button--small {
  margin-block: var(--space-s);
  margin-inline: 0 var(--space-xs);
  padding: calc(var(--space-xs) - 1px) calc(var(--space-m) - 1px); /* 1 */
  font-size: var(--font-size-xs);
}

/* Common styles for extra small buttons. */

.no-touchevents .button--extrasmall {
  margin-block: var(--space-xs);
  margin-inline: 0 var(--space-xs);
  padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px); /* 1 */
  font-size: var(--font-size-xs);
}

/* Styles for action link buttons. */

.button--action {
  margin: 0;
}

.button--action::before {
  margin-inline: -0.25em 0;
  padding-inline: 0 0.25em;
  content: "+";
  font-weight: 900;
}

/* Primary button style.s */

.button--primary {
  color: var(--button-fg-color--primary);
  background-color: var(--button-bg-color--primary);
}

.button--primary:is(:hover, :active) {
  color: var(--button-fg-color--primary);
  background-color: var(--button--hover-bg-color--primary);
}

/* Danger button styles */

.button--danger {
  color: var(--button-fg-color--danger);
  background-color: var(--button-bg-color--danger);
}

.button--danger:is(:hover, :active) {
  color: var(--button-fg-color--danger);
  background-color: var(--button--hover-bg-color--danger);
}

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

.button:is(:disabled, .is-disabled) {
  color: var(--button--disabled-fg-color);
  background-color: var(--button--disabled-bg-color);
}

/* Make disabled  behave like a [disabled]  or . */

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

/**
 * Style a clickable/tappable element as a link. Duplicates the base style for
 * the  tag, plus a reset for padding, borders and background.
 */

.link {
  display: inline;
  padding: 0;
  cursor: pointer;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  border: 0;
  background: none;
  appearance: none;
}