.action-link--danger {
  background-color: var(--va-red-darker);
  color: var(--va-white);
}

.action-link--danger:hover {
  color: var(--va-red-darker);
}

// the "trash can" svg icon is inlined in claro's CSS with a hardcoded fill value, we are overriding the fill here
.action-link--icon-trash.action-link--danger::before {
  background-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23fff' 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");
}

.action-link--icon-trash.action-link--danger::before:hover {
  background-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23981b1e' 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");
}

.button--outline.action-link--icon-trash.action-link--danger::before {
  background-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%230071bb' 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");
}

.button--outline.action-link--icon-trash.action-link--danger:hover::before {
  background-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23003e73' 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");
}

// hack for unlock button... form action is added way later in content_lock.module
.content-lock-actions .button:last-child {
  background-color: var(--va-white);
  border: 2px solid var(--va-blue-dark) !important;
  box-shadow: none;
  color: var(--va-blue-dark);
  padding: calc(var(--space-m) - 2px) calc(var(--space-l) - 2px); //2px offset for border

  &:hover {
    background-color: var(--va-blue-lightest);
    border: 2px solid var(--va-blue-darkest);
    color: var(--va-blue-darkest);
  }

  &:focus {
    box-shadow: var(--focus-box-shadow);
    outline: var(--focus-outline);
  }
}

.button--outline.action-link {
  padding: calc(
      (var(--space-m) - var(--space-l) / 2 + var(--space-m) / 2) - 2px
    )
    calc(var(--space-m) - 2px);
  text-decoration: none;
}

// admin/content/deploy builds front-end button in nested markup
.va-gov-build-trigger-build-trigger-form {
  .button--primary a {
    color: var(--va-white);
    text-decoration: none;
  }
}

// fixes spacing when 2 buttons inside IEF form row
.ief-entity-operations {
  .button + .button {
    margin-top: 0;
  }
}

.node-preview-button {
  margin-top: 0;
}

// no fuzzy buttons in tables
table .button,
table .button:not(:focus) {
  // fixes contrast issue when row is hovered but button isn't. !important bc core
  border: 1px solid var(--va-white) !important;
  box-shadow: none;
}

// keeps dropbuttons text aligned with the toggle
.js.no-touchevents
  .dropbutton--multiple.dropbutton--extrasmall
  .dropbutton__item:first-of-type {
  white-space: nowrap;
}

.button {
  overflow-wrap:  break-word;
}

a.button--outline,
.button--outline {
  background-color: var(--va-white);
  border: 2px solid var(--va-blue-dark) !important;
  box-shadow: none;
  color: var(--va-blue-dark);
  padding: calc(var(--space-m) - 2px) calc(var(--space-l) - 2px); //2px offset for border

  &:hover {
    background-color: var(--va-blue-lightest);
    border: 2px solid var(--va-blue-darkest);
    color: var(--va-blue-darkest);
  }
}

.button--small {
  font-size: var(--font-size-xs);
  margin: var(--space-s) var(--space-xs) var(--space-s) 0;
  padding: calc(var(--space-xs) - 1px) calc(var(--space-m) - 1px);
}

.button--icon {
  svg {
    margin-right: var(--spacing-s);
  }
}
