action-link.css

/*
 * 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-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;
  -webkit-text-decoration: none;
  text-decoration: none;
  color: var(--gin-color-primary);
  border-radius: var(--gin-border-s);
  background: transparent;
  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 {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--gin-color-primary-hover);
    background: var(--gin-bg-item-hover);
  }

  &:focus {
    position: relative;
    z-index: 1;
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--gin-color-primary-active);
    background: var(--gin-color-primary-light-hover);
  }

  &:active {
    color: var(--color-absolutezero-active);
    background-color: var(--color-bgblue-active);
  }

  &.action-link--extrasmall {
    font-size: var(--gin-font-size-xxs);
  }

  /**
  * 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: currentColor;
    background-image: none;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }

  & + .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 

  @media (forced-colors: active) {
    &::before {
      background: linktext;
    }
  }
}

.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(--gin-font-size-xxs);
  }

  & .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(--gin-bg-layer);
    background-color: var(--gin-color-danger);
  }
}

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

.action-link--icon-trash {
  &::before {
    content: "";
    mask-image: url("data:image/svg+xml,%3csvg height='16' fill='%23545560' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
  }

  /* Trash action link rendered as a button. */
  &.action-link--danger {
    border: 2px solid var(--gin-color-danger);
    border-radius: var(--gin-border-m);
    font-size: var(--gin-font-size-s);
    line-height: 1;
    padding-block: calc(var(--gin-spacing-s) - 2px);
    padding-inline: var(--gin-spacing-m);

    &::before {
      content: none;
    }
  }
}

.action-link--icon-plus::before {
  content: "";
  mask-image: var(--admin-icon-add);
}

.action-link--icon-ex::before {
  content: "";
  mask-image: var(--admin-icon-remove);
}

.action-link--icon-checkmark::before {
  content: "";
  mask-image: var(--admin-icon-checkmark);
}

.action-link--icon-cog::before {
  content: "";
  mask-image: var(--admin-icon-config);
}

.action-link--icon-show::before {
  content: "";
  mask-image: var(--admin-icon-show);
}

.action-link--icon-hide::before {
  content: "";
  mask-image: var(--admin-icon-hide);
}

.action-link--icon-key::before {
  content: "";
  mask-image: var(--admin-icon-devel);
}

.action-link--icon-questionmark::before {
  content: "";
  mask-image: var(--admin-icon-help);
}

.action-link--icon-chevron-left::before {
  content: "";
  mask-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 2L5 8l6 6' stroke='%23545560' stroke-width='2'/%3e%3c/svg%3e");
}

/* @todo Maybe move these styles over to button. */

.button.button--danger {
  min-height: 0;
  color: var(--gin-color-danger);
  border-color: var(--gin-color-danger);
  box-shadow: 0 1px 2px var(--gin-color-danger-lightest);

  &:hover,
  &:focus,
  &:active {
    color: var(--gin-bg-layer);
    background-color: var(--gin-color-danger);
  }
}