// $bg-hover applies to both background-color and border-color properties
@mixin btn-outline-pseudo($darkMode: false) {
  @if $darkMode {
    &:focus {
      border-color: var(--cbp-color-interactive-focus-light);
    }

    &:active {
      background-color: var(--cbp-color-base-neutral-darker);
      border-color: var(--cbp-color-interactive-active-light);
      color: var(--cbp-color-interactive-active-light);
    }

    &:disabled {
      background-color: var(--cbp-color-base-neutral-darker);
      border-color: var(--cbp-color-interactive-disabled-light);
      color: var(--cbp-color-interactive-disabled-light);
    }

  } @else {
    &:focus {
      border-color: var(--cbp-color-interactive-focus-dark);
    }

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

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

@mixin btn-active-solid-pseudo($darkMode: false) {
  @if $darkMode {
    &:active {
      background-color: var(--cbp-color-interactive-active-light);
      border-color: var(--cbp-color-interactive-active-light);
      color: var(--cbp-color-text-darkest);
    }
  }
  @else {
    &:active {
      background-color: var(--cbp-color-interactive-active-dark);
      border-color: var(--cbp-color-interactive-active-dark);
    }
  }
}