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

/**
 * @file
 * Styles for action links.
 *
 * Contains Action link component and the action-links layout styles.
 */

/**
 * Action links layout.
 */

.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-inline-start: var(--space-s);
}

.action-links__item + .action-links__item > .action-link--small {
  margin-inline-start: var(--space-xs);
}

/**
 * The action link component.
 */

.action-link {
  display: inline-block;
  padding: calc(var(--space-m) - ((var(--space-l) - var(--space-m)) / 2)) var(--space-m);
  cursor: pointer;
  -webkit-text-decoration: none;
  text-decoration: none;
  color: var(--color-gray-800);
  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-l);
  /* Bigger line-height needed to prevent the icon from increasing the height */
  -webkit-font-smoothing: antialiased;

  /* Action link states */
}

.action-link:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: var(--color-absolutezero-hover);
  background-color: var(--color-bgblue-hover);
}

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

.action-link:active {
  color: var(--color-absolutezero-active);
  background-color: var(--color-bgblue-active);
}

/**
  * 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 {
  position: relative;
  inset-block-start: 0.125rem;
  /* Set the proper vertical alignment */
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline: calc(var(--space-s) - var(--space-m)) 0.5em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.action-link + .action-link {
  margin-inline-start: var(--space-s);
}

/**
  * Action links inside form-actions.
  *
  * Add the same margin for action-link inside form-actions as button has.
  */

.form-actions .action-link,
.field-actions .action-link {
  margin-inline: 0 var(--space-s);
}

/* 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);
}

.no-touchevents .action-link--small + .action-link--small,
.no-touchevents .action-link--extrasmall + .action-link--extrasmall {
  margin-inline-start: var(--space-xs);
}

/**
 * Action link variants.
 */

/* Danger. */

.action-link--danger {
  color: var(--color-maximumred);
}

.action-link--danger:hover {
  color: var(--color-maximumred-hover);
  background-color: var(--color-bgred-hover);
}

.action-link--danger:active {
  color: var(--color-maximumred-active);
  background-color: var(--color-bgred-active);
}

.no-touchevents .action-link--small::before,
.no-touchevents .action-link--extrasmall::before {
  inset-block-start: 0.0625rem;
  /* Set the proper vertical alignment */
  width: var(--space-s);
  height: var(--space-s);
  margin-inline: -0.125rem 0.4em;
}

/* Plus */

.action-link--icon-plus::before {
  content: "";
  background-image: url("");
}

@media (forced-colors: active) {
  .action-link--icon-plus::before {
    background: linktext !important;
    mask-repeat: no-repeat;
    mask-image: url("");
  }
}

.action-link--icon-plus:hover::before {
  background-image: url("");
}

.action-link--icon-plus:active::before {
  background-image: url("");
}

/* Plus — danger */

.action-link--icon-plus.action-link--danger::before {
  background-image: url("");
}

.action-link--icon-plus.action-link--danger:hover::before {
  background-image: url("");
}

.action-link--icon-plus.action-link--danger:active::before {
  background-image: url("");
}

/* Trash */

.action-link--icon-trash::before {
  content: "";
  background-image: url("");
}

@media (forced-colors: active) {
  .action-link--icon-trash::before {
    background: linktext !important;
    mask-repeat: no-repeat;
    mask-image: url("");
  }
}

.action-link--icon-trash:hover::before {
  background-image: url("");
}

.action-link--icon-trash:active::before {
  background-image: url("");
}

/* Trash — danger */

.action-link--icon-trash.action-link--danger::before {
  background-image: url("");
}

.action-link--icon-trash.action-link--danger:hover::before {
  background-image: url("");
}

.action-link--icon-trash.action-link--danger:active::before {
  background-image: url("");
}

/* Ex */

.action-link--icon-ex::before {
  content: "";
  background-image: url("");
}

@media (forced-colors: active) {
  .action-link--icon-ex::before {
    background: linktext !important;
    mask-repeat: no-repeat;
    mask-image: url("");
  }
}

.action-link--icon-ex:hover::before {
  background-image: url("");
}

.action-link--icon-ex:active::before {
  background-image: url("");
}

/* Ex — danger */

.action-link--icon-ex.action-link--danger::before {
  background-image: url("");
}

.action-link--icon-ex.action-link--danger:hover::before {
  background-image: url("");
}

.action-link--icon-ex.action-link--danger:active::before {
  background-image: url("");
}

/* Checkmark */

.action-link--icon-checkmark::before {
  content: "";
  background-image: url("");
}

@media (forced-colors: active) {
  .action-link--icon-checkmark::before {
    background: linktext !important;
    mask-repeat: no-repeat;
    mask-image: url("");
  }
}

.action-link--icon-checkmark:hover::before {
  background-image: url("");
}

.action-link--icon-checkmark:active::before {
  background-image: url("");
}

/* Checkmark — danger */

.action-link--icon-checkmark.action-link--danger::before {
  background-image: url("");
}

.action-link--icon-checkmark.action-link--danger:hover::before {
  background-image: url("");
}

.action-link--icon-checkmark.action-link--danger:active::before {
  background-image: url("");
}

/* Cog */

.action-link--icon-cog::before {
  content: "";
  background-image: url("");
}

@media (forced-colors: active) {
  .action-link--icon-cog::before {
    background: linktext !important;
    mask-repeat: no-repeat;
    mask-image: url("");
  }
}

.action-link--icon-cog:hover::before {
  background-image: url("");
}

.action-link--icon-cog:active::before {
  background-image: url("");
}

/* Cog — danger */

.action-link--icon-cog.action-link--danger::before {
  background-image: url("");
}

.action-link--icon-cog.action-link--danger:hover::before {
  background-image: url("");
}

.action-link--icon-cog.action-link--danger:active::before {
  background-image: url("");
}

/* Show */

.action-link--icon-show::before {
  content: "";
  background-image: url("");
}

@media (forced-colors: active) {
  .action-link--icon-show::before {
    background: linktext !important;
    mask-repeat: no-repeat;
    mask-image: url("");
  }
}

.action-link--icon-show:hover::before {
  background-image: url("");
}

.action-link--icon-show:active::before {
  background-image: url("");
}

/* Show - danger */

.action-link--icon-show.action-link--danger::before {
  background-image: url("");
}

.action-link--icon-show.action-link--danger:hover::before {
  background-image: url("");
}

.action-link--icon-show.action-link--danger:active::before {
  background-image: url("");
}

/* Hide */

.action-link--icon-hide::before {
  content: "";
  background-image: url("");
}

@media (forced-colors: active) {
  .action-link--icon-hide::before {
    background: linktext !important;
    mask-repeat: no-repeat;
    mask-image: url("");
  }
}

.action-link--icon-hide:hover::before {
  background-image: url("");
}

.action-link--icon-hide:active::before {
  background-image: url("");
}

/* Hide - danger */

.action-link--icon-hide.action-link--danger::before {
  background-image: url("");
}

.action-link--icon-hide.action-link--danger:hover::before {
  background-image: url("");
}

.action-link--icon-hide.action-link--danger:active::before {
  background-image: url("");
}

/* Key */

.action-link--icon-key::before {
  content: "";
  background-image: url("");
}

@media (forced-colors: active) {
  .action-link--icon-key::before {
    background: linktext !important;
    mask-repeat: no-repeat;
    mask-image: url("");
  }
}

.action-link--icon-key:hover::before {
  background-image: url("");
}

.action-link--icon-key:active::before {
  background-image: url("");
}

/* Key — danger */

.action-link--icon-key.action-link--danger::before {
  background-image: url("");
}

.action-link--icon-key.action-link--danger:hover::before {
  background-image: url("");
}

.action-link--icon-key.action-link--danger:active::before {
  background-image: url("");
}

/* Question Mark */

.action-link--icon-questionmark::before {
  content: "";
  background-image: url("");
}

@media (forced-colors: active) {
  .action-link--icon-questionmark::before {
    background: linktext !important;
    mask-repeat: no-repeat;
    mask-image: url("");
  }
}

.action-link--icon-questionmark:hover::before {
  background-image: url("");
}

.action-link--icon-questionmark:active::before {
  background-image: url("");
}

/* Question Mark - danger */

.action-link--icon-questionmark.action-link--danger::before {
  background-image: url("");
}

.action-link--icon-questionmark.action-link--danger:hover::before {
  background-image: url("");
}

.action-link--icon-questionmark.action-link--danger:active::before {
  background-image: url("");
}

.action-link--icon-chevron-left::before {
  display: block;
  content: "";
  background-image: url("");
}

@media (min-width: 30em) {
  .action-link--icon-chevron-left::before {
    display: inline-block;
  }
}