@mixin selectable-background($dark-theme, $background-color-on-before: false, $border-radius: 0) {
  position: relative;
  cursor: pointer;

  $hover-background: $hover-background-light-theme;
  //$focus-background: $focus-background-light-theme;
  
  @if($dark-theme) {
    $hover-background: $hover-background-dark-theme;
    //$focus-background: $focus-background-dark-theme;
  }

  @if ($background-color-on-before) {
    position: relative;
    z-index: 1;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: $border-radius;
      z-index: -1;
      transition: background-color 250ms linear;
    }

    &:hover::before {
      background-color: $hover-background;
    }

    &:active::before {
      background-color: $hover-background;
    }




    //&:active::before {
    //  background-color: $focus-background;
    //}

    //&.active::before {
    //  background-color: $focus-background;
    //}
  } @else {
    transition: background-color 250ms linear;

    &:hover {
      background-color: $hover-background;
    }

    &:active {
      background-color: $hover-background;
    }

    //&:active {
    //  background-color: $focus-background;
    //}

    //&.active {
    //  background-color: $focus-background;
    //}
  }



}