Sass darken, lighten how to use correctly?

Question

css

:root
  --mainColor: #28bebd
  --text-color: #FFF
  --mainColorHover: rgba(var(--mainColor), 0.5)

So I use it like this:

.btn-info
  background-color: var(--mainColor)
  border-color: var(--mainColor)

  &:hover, &:active, &:focus
    background-color: var(--mainColorHover)

But for some reason the color on hover does not work. lighten and darken with css variables, as I understand it, do not work. What's wrong with rgba?

Answer 1

Where is lighten or darken in your code?
$color: #112233;
$darkenColor: darken($color, 10%);
$lightenColor: lighten($color, 10%);

Answer 2

$black: #000000
color: lighten($black, 10%)
color: darken($black, 10%)

Answer 3

When you write: Css interprets it as: Now read the rgba documentation. Can this format be used? You need to rewrite the --mainColor property in a valid format for rgba:
--mainColorHover: rgba(var(--mainColor), 0.5)
--mainColorHover: rgba(#28bebd, 0.5)
--mainColor: 0, 0, 0 // или любой другой цвет rgb