.btn {
  /* Button destructive */
  &.btn--destructive {
    /* Borderless State */
    &.btn--no-border {
      background-color: transparent;
      color: var(--op-color-alerts-danger-base);
      box-shadow: none;

      /* Borderless + Hover State */
      &:hover {
        background-color: var(--op-color-alerts-danger-base);
        box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-base);
        color: var(--op-color-alerts-danger-on-base);
      }

      /* Borderless + Active State */
      &.btn--active {
        background-color: var(--op-color-alerts-danger-plus-four);
        box-shadow: inset var(--op-border-all) var(--op-color-alerts-danger-plus-one);
        color: var(--op-color-alerts-danger-on-plus-four);
      }

      /* Borderless + Focus State */
      &:focus-visible {
        background-color: var(--op-color-alerts-danger-plus-six);
        color: var(--op-color-alerts-danger-on-plus-six);
        box-shadow: var(--op-input-focus-danger);
      }
    }
  }
}