@use 'mixins' as *;

.cbp-btn__danger {
  background-color: var(--cbp-color-danger-base);
  border-color: var(--cbp-color-danger-base);
  color: var(--cbp-color-text-lightest);

  &:hover:not(:focus):not(:disabled) {
    background-color: var(--cbp-color-danger-dark);
    border-color: var(--cbp-color-danger-dark);
  }
}

.cbp-btn__danger-outline {
  background-color: var(--cbp-color-white);
  border: var(--cbp-border-size-md) solid var(--cbp-color-danger-base);
  color: var(--cbp-color-danger-base);
  padding-top: var(--cbp-space-2x);
  padding-bottom: var(--cbp-space-2x);

  &:hover:not(:focus):not(:disabled) {
    background-color: var(--cbp-color-danger-dark);
    border-color: var(--cbp-color-danger-dark);
    color: var(--cbp-color-text-lightest);
  }

  &:active {
    background-color: var(--cbp-color-white);
    color: var(--cbp-color-interactive-active-dark);
  }

  &:disabled {
    background-color: transparent;
    color: var(--cbp-color-interactive-disabled-dark);
  }
}

.cbp-btn__danger-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--cbp-color-danger-base);

  &:hover:not(:focus):not(:disabled) {
    color: var(--cbp-color-danger-darker);
    background-color: var(--cbp-color-danger-light);
    border-color: var(--cbp-color-danger-light);
  }

  &:active {
    background-color: transparent;
    color: var(--cbp-color-interactive-active-dark);
  }

  &:disabled {
    background-color: transparent;
    border-color: transparent;
    color: var(--cbp-color-interactive-disabled-dark);
  }
}


/* Dark Mode */
[data-cbp-theme="dark"] {
  & .cbp-btn__danger {
    background-color: var(--cbp-color-danger-light);
    border-color: var(--cbp-color-danger-light);
    color: var(--cbp-color-danger-darker);

    @include btn-outline-pseudo($darkMode: true);
  }

  & .cbp-btn__danger-outline {
    background-color: var(--cbp-color-base-neutral-darker);
    border-color: var(--cbp-color-danger-light);
    color: var(--cbp-color-danger-light);

    @include btn-outline-pseudo($darkMode: true);
  }

  .cbp-btn__danger-ghost {
    color: var(--cbp-color-danger-light);

    &:hover:not(:focus):not(:disabled) {
      background-color: var(--cbp-color-danger-base);
      color: var(--cbp-color-text-lightest);
    }

    &:disabled {
      background-color: transparent;
      border-color: transparent;
    }
  }
}