/*!
    *
    * Wijmo Library 5.20261.50
    * https://developer.mescius.com/wijmo
    *
    * Copyright(c) MESCIUS inc. All rights reserved.
    *
    * Licensed under the End-User License Agreement For MESCIUS Wijmo Software.
    * us.sales@mescius.com
    * https://developer.mescius.com/wijmo/licensing
    *
    */

// Use modern Sass modules
@use "sass:color";
@use "sass:meta";

// Helper function to get lightness value (compatible with Sass 1.56+)
// Uses color.channel() which is the non-deprecated API
@function get-lightness($color) {
  @return color.channel($color, "lightness", $space: hsl);
}

// darken a color or return an almost transparent black
@function safedarken($color, $amount) {
  @if meta.type-of($color) == "color" and $color != transparent {
    @return color.adjust($color, $lightness: -$amount);
  } @else {
    @return rgba(0, 0, 0, 0.08);
  }
}

// lighten a color or return an almost transparent white
@function safelighten($color, $amount) {
  @if meta.type-of($color) == "color" and $color != transparent {
    @return color.adjust($color, $lightness: $amount);
  } @else {
    @return rgba(255, 255, 255, 0.08);
  }
}

// darken light colors, lighten dark colors
@function safechangecolor($color, $amount) {
  @if meta.type-of($color) == "color" and get-lightness($color) > 50% {
    @return safedarken($color, $amount);
  } @else {
    @return safelighten($color, $amount);
  }
}

// create a background with an optional gradient
@mixin backgradient($color, $gradient, $transparentColor: null, $replacementColor: null) {
  // if color is null, render nothing (e.g. backgradient($wj-cell-frz, true))
  @if $color {
    // is color is the same as the background, darken slightly
    @if $transparentColor == transparent {
      $color: $replacementColor;
    }
    // output the background
    background: $color;
    // output the optional gradient
    @if $gradient {
      @if meta.type-of($color) == "color" and get-lightness($color) > 50% {
        $otherColor: safedarken($color, 12%);
        background-image: linear-gradient($color, $otherColor);
      } @else {
        $otherColor: safelighten($color, 12%);
        background-image: linear-gradient($color, $otherColor);
      }
    }
  }
}

// add prefixes to a property
// https://css-tricks.com/snippets/sass/mixin-prefix-properties/
@mixin prefix($property, $value, $prefixes: ()) {
  #{$property}: $value;

  @each $prefix in $prefixes {
    #{'-' + $prefix + '-' + $property}: $value;
  }
}

@mixin wjButton($wj-btn-bkg, $wj-btn-grd, $wj-btn-txt, $wj-btn-hvr, $wj-tdn-focus, $wj-disabled-opacity) {
  // button elements
  @include backgradient($wj-btn-bkg, $wj-btn-grd, $wj-btn-bkg, rgba(0, 0, 0, 0.1));
  cursor: pointer;
  color: $wj-btn-txt;
  display: inline-block;
  border-style: none;
  padding: 0 10px;
  text-align: center;
  min-width: 30px;
  white-space: nowrap;

  &:focus,
  &:hover {
    @include backgradient($wj-btn-hvr, $wj-btn-grd, $wj-btn-bkg, rgba(0, 0, 0, 0.2));
    transition-duration: $wj-tdn-focus;
  }

  &.wj-state-active {
    background: safechangecolor($wj-btn-bkg, 10%);
    //@include backgradient($wj-btn-hvr, $wj-btn-grd, $wj-btn-bkg, rgba(0, 0, 0, .8));
  }

  &[disabled] {
    cursor: default;
    pointer-events: none;
    opacity: $wj-disabled-opacity;
  }
}

@mixin wjButtonStyledLinks($wj-bdr-rad) {
  // not for buttons in input controls
  border-radius: $wj-bdr-rad;
  padding: 6px 15px;
  text-decoration: none;
  font-weight: bold;
  font-size: 12px;
}