.action-link {
  color: var(--gin-color-primary);
  background-color: transparent;
  border-radius: var(--gin-border-s);

  &:hover {
    color: var(--gin-color-primary-hover);
    background-color: var(--gin-bg-item-hover);
  }

  &:focus {
    color: var(--gin-color-primary-active);
    background-color: var(--gin-color-primary-light-hover);
  }

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

  &:before {
    background-image: none;
    background-color: var(--gin-color-primary);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }

  &--icon-ex:hover::before,
  &--icon-checkmark:hover:before,
  &--icon-show:hover::before,
  &--icon-cog:hover::before,
  &--icon-hide:hover::before,
  &--icon-show:before,
  &--icon-hide:before {
    background-image: none;
    background-color: var(--gin-color-primary);
  }

  &--icon-checkmark:before {
    mask-image: icon('checkmark');
  }

  &--icon-show:before {
    mask-image: icon('show');
  }

  &--icon-hide:before {
    mask-image: icon('hide');
  }

  &--icon-cog::before {
    mask-image: icon('config');
  }

  &--icon-ex::before {
    mask-image: icon('remove');
  }

  &--icon-key::before {
    mask-image: icon('devel');
  }

  &--icon-questionmark::before {
    mask-image: icon('help');
  }
}

.action-link--icon-trash.action-link--danger,
.button.button--danger,
a.button.button--danger {
  color: var(--gin-color-danger);
  box-shadow: 0 1px 2px var(--gin-color-danger-lightest);

  &,
  &:hover,
  &:focus,
  &:active {
    // border-color: transparent !important;
    border-color: var(--gin-color-danger) !important;

    &:before {
      background-image: none;
      background-color: var(--gin-color-danger);
      mask-image: icon('trash');
    }
  }

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

    &:before {
      background-color: var(--gin-bg-layer);
    }
  }
}

// Primary danger button
.button--primary.button--danger {
  color: var(--gin-bg-layer);
  background-color: var(--gin-color-danger);
}