tweb-i2p/src/scss/mixins/_hover.scss

/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

@mixin hover($color: null, $property: null, $use-transition: false) {
  @if $color {
    @if $color == filled-gray {
      $color: var(--light-filled-secondary-text-color);
    } @else if $color == gray {
      $color: var(--light-secondary-text-color);
    } @else if $color == blue or $color == primary {
      $color: var(--light-primary-color);
    } @else if $color == red {
      $color: var(--light-danger-color);
    }
  }

  html.no-touch &:hover,
  html.no-touch &:active {
    @if $property != null {
      @if $use-transition {
        transition: .2s #{$property};
      }
      
      #{$property}: $color;
    }
    

    @content;
  }
}

@mixin hover-effect($color: gray, $use-transition: false) {
  @include hover($color, color, $use-transition) {
    @content;
  }
}

@mixin hover-background-effect($color: gray, $use-transition: false) {
  @include hover($color, background-color, $use-transition) {
    @content;
  }
}

@mixin btn-hoverable {
  @include hover-background-effect();
  
  &.primary, 
  &.blue, 
  &.active {
    @include hover-background-effect(primary);
  }
  
  &.danger {
    @include hover-background-effect(red);
  }
}