/**
 * @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-link {
      margin-inline-start: var(--space-s);
    }

    & > .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;
  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 */
  &:hover {
    text-decoration: none;
    color: var(--color-absolutezero-hover);
    background-color: var(--color-bgblue-hover);
  }

  &:focus {
    position: relative;
    z-index: 1;
    text-decoration: none;
  }

  &: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 */
  &::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 {
    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 &,
  .field-actions & {
    margin-inline: 0 var(--space-s);
  }
}

.no-touchevents {
  /* Small variant. */
  & .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. */
  & .action-link--extrasmall {
    padding: 0 var(--space-xs);
    font-size: var(--font-size-s);
  }

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

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

  &:hover {
    color: var(--color-maximumred-hover);
    background-color: var(--color-bgred-hover);
  }

  &: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;
}

.action-link--icon-plus {
  /* Plus */
  &::before {
    content: "";
    background-image: url(../../images/icons/545560/plus.svg);

    @media (forced-colors: active) {
      background: linktext !important;
      mask-repeat: no-repeat;
      mask-image: url(../../images/icons/d72222/plus.svg);
    }
  }

  &:hover::before {
    background-image: url(../../images/icons/0036b1/plus.svg);
  }

  &:active::before {
    background-image: url(../../images/icons/002e9a/plus.svg);
  }

  &.action-link--danger {
    /* Plus — danger */
    &::before {
      background-image: url(../../images/icons/d72222/plus.svg);
    }

    &:hover::before {
      background-image: url(../../images/icons/c11f1f/plus.svg);
    }

    &:active::before {
      background-image: url(../../images/icons/ab1b1b/plus.svg);
    }
  }
}

.action-link--icon-trash {
  /* Trash */
  &::before {
    content: "";
    background-image: url(../../images/icons/545560/trash.svg);

    @media (forced-colors: active) {
      background: linktext !important;
      mask-repeat: no-repeat;
      mask-image: url(../../images/icons/d72222/trash.svg);
    }
  }

  &:hover::before {
    background-image: url(../../images/icons/0036b1/trash.svg);
  }

  &:active::before {
    background-image: url(../../images/icons/002e9a/trash.svg);
  }

  &.action-link--danger {
    /* Trash — danger */
    &::before {
      background-image: url(../../images/icons/d72222/trash.svg);
    }

    &:hover::before {
      background-image: url(../../images/icons/c11f1f/trash.svg);
    }

    &:active::before {
      background-image: url(../../images/icons/ab1b1b/trash.svg);
    }
  }
}

.action-link--icon-ex {
  /* Ex */
  &::before {
    content: "";
    background-image: url(../../images/icons/545560/ex.svg);

    @media (forced-colors: active) {
      background: linktext !important;
      mask-repeat: no-repeat;
      mask-image: url(../../images/icons/d72222/ex.svg);
    }
  }

  &:hover::before {
    background-image: url(../../images/icons/0036b1/ex.svg);
  }

  &:active::before {
    background-image: url(../../images/icons/002e9a/ex.svg);
  }

  &.action-link--danger {
    /* Ex — danger */
    &::before {
      background-image: url(../../images/icons/d72222/ex.svg);
    }

    &:hover::before {
      background-image: url(../../images/icons/c11f1f/ex.svg);
    }

    &:active::before {
      background-image: url(../../images/icons/ab1b1b/ex.svg);
    }
  }
}

.action-link--icon-checkmark {
  /* Checkmark */
  &::before {
    content: "";
    background-image: url(../../images/icons/545560/checkmark.svg);

    @media (forced-colors: active) {
      background: linktext !important;
      mask-repeat: no-repeat;
      mask-image: url(../../images/icons/d72222/checkmark.svg);
    }
  }

  &:hover::before {
    background-image: url(../../images/icons/0036b1/checkmark.svg);
  }

  &:active::before {
    background-image: url(../../images/icons/002e9a/checkmark.svg);
  }

  &.action-link--danger {
    /* Checkmark — danger */
    &::before {
      background-image: url(../../images/icons/d72222/checkmark.svg);
    }

    &:hover::before {
      background-image: url(../../images/icons/c11f1f/checkmark.svg);
    }

    &:active::before {
      background-image: url(../../images/icons/ab1b1b/checkmark.svg);
    }
  }
}

.action-link--icon-cog {
  /* Cog */
  &::before {
    content: "";
    background-image: url(../../images/icons/545560/cog.svg);

    @media (forced-colors: active) {
      background: linktext !important;
      mask-repeat: no-repeat;
      mask-image: url(../../images/icons/d72222/cog.svg);
    }
  }

  &:hover::before {
    background-image: url(../../images/icons/0036b1/cog.svg);
  }

  &:active::before {
    background-image: url(../../images/icons/002e9a/cog.svg);
  }

  &.action-link--danger {
    /* Cog — danger */
    &::before {
      background-image: url(../../images/icons/d72222/cog.svg);
    }

    &:hover::before {
      background-image: url(../../images/icons/c11f1f/cog.svg);
    }

    &:active::before {
      background-image: url(../../images/icons/ab1b1b/cog.svg);
    }
  }
}

.action-link--icon-show {
  /* Show */
  &::before {
    content: "";
    background-image: url(../../images/icons/545560/show.svg);

    @media (forced-colors: active) {
      background: linktext !important;
      mask-repeat: no-repeat;
      mask-image: url(../../images/icons/d72222/show.svg);
    }
  }

  &:hover::before {
    background-image: url(../../images/icons/0036b1/show.svg);
  }

  &:active::before {
    background-image: url(../../images/icons/002e9a/show.svg);
  }

  &.action-link--danger {
    /* Show - danger */
    &::before {
      background-image: url(../../images/icons/d72222/show.svg);
    }

    &:hover::before {
      background-image: url(../../images/icons/c11f1f/show.svg);
    }

    &:active::before {
      background-image: url(../../images/icons/ab1b1b/show.svg);
    }
  }
}

.action-link--icon-hide {
  /* Hide */
  &::before {
    content: "";
    background-image: url(../../images/icons/545560/hide.svg);

    @media (forced-colors: active) {
      background: linktext !important;
      mask-repeat: no-repeat;
      mask-image: url(../../images/icons/d72222/hide.svg);
    }
  }

  &:hover::before {
    background-image: url(../../images/icons/0036b1/hide.svg);
  }

  &:active::before {
    background-image: url(../../images/icons/002e9a/hide.svg);
  }

  &.action-link--danger {
    /* Hide - danger */
    &::before {
      background-image: url(../../images/icons/d72222/hide.svg);
    }

    &:hover::before {
      background-image: url(../../images/icons/c11f1f/hide.svg);
    }

    &:active::before {
      background-image: url(../../images/icons/ab1b1b/hide.svg);
    }
  }
}

.action-link--icon-key {
  /* Key */
  &::before {
    content: "";
    background-image: url("../../images/icons/545560/key.svg");

    @media (forced-colors: active) {
      background: linktext !important;
      mask-repeat: no-repeat;
      mask-image: url(../../images/icons/d72222/key.svg);
    }
  }

  &:hover::before {
    background-image: url("../../images/icons/0036b1/key.svg");
  }

  &:active::before {
    background-image: url("../../images/icons/002e9a/key.svg");
  }

  &.action-link--danger {
    /* Key — danger */
    &::before {
      background-image: url("../../images/icons/d72222/key.svg");
    }

    &:hover::before {
      background-image: url("../../images/icons/c11f1f/key.svg");
    }

    &:active::before {
      background-image: url("../../images/icons/ab1b1b/key.svg");
    }
  }
}

.action-link--icon-questionmark {
  /* Question Mark */
  &::before {
    content: "";
    background-image: url("../../images/icons/545560/questionmark.svg");

    @media (forced-colors: active) {
      background: linktext !important;
      mask-repeat: no-repeat;
      mask-image: url(../../images/icons/d72222/questionmark.svg);
    }
  }

  &:hover::before {
    background-image: url("../../images/icons/0036b1/questionmark.svg");
  }

  &:active::before {
    background-image: url("../../images/icons/002e9a/questionmark.svg");
  }

  &.action-link--danger {
    /* Question Mark - danger */
    &::before {
      background-image: url("../../images/icons/d72222/questionmark.svg");
    }

    &:hover::before {
      background-image: url("../../images/icons/c11f1f/questionmark.svg");
    }

    &:active::before {
      background-image: url("../../images/icons/ab1b1b/questionmark.svg");
    }
  }
}

.action-link--icon-chevron-left {
  &::before {
    display: block;
    content: "";
    background-image: url("../../images/icons/545560/pager-prev.svg");
  }
}

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