/**
 * @file
 * Styles for action links.
 *
 * Contains Action link component and the action-links layout styles.
 */
/**
 * Action links layout.
 */
.action-links,
[dir="rtl"] .action-links {
  margin: var(--space-l) 0;
  list-style: none;
}

.action-links__item {
  display: inline-block;
}

.action-links__item + .action-links__item > .action-link {
  margin-left: var(--space-s);
  /* LTR */
}

[dir="rtl"] .action-links__item + .action-links__item > .action-link {
  margin-right: var(--space-s);
  margin-left: 0;
}

.action-links__item + .action-links__item > .action-link--small {
  margin-left: var(--space-xs);
  /* LTR */
}

[dir="rtl"] .action-links__item + .action-links__item > .action-link--small {
  margin-right: var(--space-xs);
  margin-left: 0;
}

/**
 * The action link component.
 */
.action-link {
  display: inline-block;
  padding: calc(var(--space-s) - 1px) var(--space-m);
  cursor: pointer;
  text-decoration: none;
  color: var(--color-gray-darker);
  border-radius: var(--button-border-radius-size);
  background-color: var(--color-bg);
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: var(--space-m);
  /* Bigger line-height needed to prevent the icon from increasing the height */
  -webkit-font-smoothing: antialiased;
}

/* Small variant. */
.no-touchevents .action-link--small {
  padding: calc(var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) var(--space-s);
  font-size: var(--font-size-s);
}

/* Extra small variant. */
.no-touchevents .action-link--extrasmall {
  padding: 0 var(--space-xs);
  font-size: var(--font-size-s);
}

.action-link + .action-link {
  margin-left: var(--space-s);
  /* LTR */
}

[dir="rtl"] .action-link + .action-link {
  margin-right: var(--space-s);
  margin-left: 0;
}

.no-touchevents .action-link--small + .action-link--small,
.no-touchevents .action-link--extrasmall + .action-link--extrasmall {
  margin-left: var(--space-xs);
  /* LTR */
}

[dir="rtl"] .no-touchevents .action-link--small + .action-link--small,
[dir="rtl"] .no-touchevents .action-link--extrasmall + .action-link--extrasmall {
  margin-right: var(--space-xs);
  margin-left: 0;
}

/**
 * Action links inside form-actions.
 *
 * Add the same margin for action-link inside form-actions as button has.
 */
.form-actions .action-link {
  margin-right: var(--space-s);
  /* LTR */
  margin-left: 0;
  /* LTR */
}

[dir="rtl"] .form-actions .action-link {
  margin-right: 0;
  margin-left: var(--space-s);
}

/* Action link states */
.action-link:hover {
  text-decoration: none;
  color: var(--color-primary-darker);
  background-color: var(--color-gray-lightest);
}

.action-link:focus {
  position: relative;
  z-index: 1;
  text-decoration: none;
}

.action-link:active {
  color: var(--color-primary-darkest);
  background-color: var(--color-primary-lighter);
}

/**
 * Action link variants.
 */
/* Danger. */
.action-link--danger {
  color: var(--color-danger);
}

.action-link--danger:hover {
  color: var(--color-danger-dark);
  background-color: var(--color-danger-lightest);
}

.action-link--danger:active {
  color: var(--color-danger-darker);
  background-color: var(--color-danger-lighter);
}

/**
 * Action link icons with states.
 *
 * We use parent-relative units here to follow the .action-link's font size.
 */
/* Defaults for icons */
.action-link::before {
  content: "";
  font-family: 'Material Icons';
  -webkit-font-feature-settings: 'liga';
  position: relative;
  top: 0.125rem;
  /* Set the proper vertical alignment */
  display: inline-block;
  font-size: 1em;
  margin-right: 0.5em;
  /* LTR */
  margin-left: calc(var(--space-s) - var(--space-m));
  /* LTR */
  color: inherit;
}

[dir="rtl"] .action-link::before {
  margin-right: calc(var(--space-s) - var(--space-m));
  margin-left: 0.5em;
}

.no-touchevents .action-link--small::before,
.no-touchevents .action-link--extrasmall::before {
  top: 0.0625rem;
  /* Set the proper vertical alignment */
  font-size: var(--space-s);
}

.no-touchevents .action-link--extrasmall::before {
  margin-right: 0.4em;
  /* LTR */
  margin-left: -0.125rem;
  /* LTR */
}

[dir="rtl"].no-touchevents .action-link--extrasmall::before {
  margin-right: -0.125rem;
  margin-left: 0.4em;
}

/**
 * Hide action link icons for IE11.
 *
 * IE 11 does not display inline svg backgrounds
 */
@media screen and (-ms-high-contrast: active) {
  /* stylelint-disable-next-line selector-type-no-unknown */
  _:-ms-fullscreen,
  .action-link::before {
    display: none;
    color: var(--color-black) !important;
  }
}

/* Plus */
.action-link--icon-plus::before {
  content: '\E145';
}

/* Trash */
.action-link--icon-trash::before {
  content: '\E872';
}

/* Ex */
.action-link--icon-ex::before {
  content: '\E5CD';
}

/* Checkmark */
.action-link--icon-checkmark::before {
  content: '\E5CA';
}

/* Cog */
.action-link--icon-cog::before {
  content: '\E8B8';
}

/* Show */
.action-link--icon-show::before {
  content: '\E8F4';
}

/* Hide */
.action-link--icon-hide::before {
  content: '\E8F5';
}