@mixin rz-color-css($property, $map) {
  @each $token,
  $value in $map {
    .rz-#{$property}-#{$token} {
      #{$property}: var(--rz-#{$token}) !important;
    }
  }
}

@mixin rz-utility-map-css($property, $map) {
  @each $token,
  $value in $map {
    .rz-#{$token} {
      #{$property}: var(--rz-#{$token}) !important;
    }
  }
}

@mixin rz-utility-list-css($property, $list, $shorthand: 'none', $unit: 'none') {
  @each $value in $list {
    @if $shorthand != none {
      .rz-#{$shorthand}-#{$value} {
        @if $unit != 'none' {
          @if $unit == 'percent' {
            #{$property}: #{$value}#{'%'} !important;
          } @else {
            #{$property}: #{$value}#{$unit} !important;
          }
        } @else {
          #{$property}: #{$value} !important;
        }
      }
    } @else {
      .rz-#{$property}-#{$value} {
        @if $unit != 'none' {
          @if $unit == 'percent' {
            #{$property}: #{$value}#{'%'} !important;
          } @else {
            #{$property}: #{$value}#{$unit} !important;
          }
        } @else {
          #{$property}: #{$value} !important;
        }
      }
    }
  }
}

@mixin rz-ripple($ripple-background: rgba(0,0,0,.12), $pseudo: false) {
  @if $pseudo == true {

    position: relative;
    overflow: hidden;
  
    &:before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0;
      background-position: center;
      background: radial-gradient(circle, currentColor 1%, transparent 1%) center/15000%;
      transition: background-size var(--rz-ripple-duration, 0.8s), opacity var(--rz-ripple-duration, 0.8s);
      pointer-events: none;
    }

    &.rz-state-disabled:before {
      background: transparent;
    }
  
    &:active {
      &:before {
        transition: background-size 0s, opacity 0s;
        opacity: .32;
        background-size: 0%;
      }
    }

  } @else {

    background-position: center;
    transition: background-size var(--rz-ripple-duration, 0.8s);
    background: radial-gradient(circle, transparent 1%, $ripple-background 1%)  center/15000%;

    &:active {
        background-color: $ripple-background;
        transition: background-size 0s;
        background-size: 0%;
    }

    &.rz-state-disabled:active {
        background-color: transparent;
    }
  }
}

@mixin rz-hover-state {
  @media (hover: hover) and (pointer: fine) {
    &:hover {
      @content;
    }
  }
}

@function rz-outlined-border-val($color, $use-border-color) {
  @if $use-border-color {
    @return $color;
  }
  @return inset 0 0 0 var(--rz-border-width) $color;
}

@mixin filled-shades($style) {
  &.rz-shade-lighter { background-color: var(--rz-#{$style}-lighter); color: var(--rz-on-#{$style}-lighter); }
  &.rz-shade-light { background-color: var(--rz-#{$style}-light); color: var(--rz-on-#{$style}-light); }
  &.rz-shade-default { background-color: var(--rz-#{$style}); color: var(--rz-on-#{$style}); }
  &.rz-shade-dark { background-color: var(--rz-#{$style}-dark); color: var(--rz-on-#{$style}-dark); }
  &.rz-shade-darker { background-color: var(--rz-#{$style}-darker); color: var(--rz-on-#{$style}-darker); }
}

@mixin outlined-shades($style, $map, $border-prop: 'box-shadow') {
  $use-bc: $border-prop == 'border-color';
  $bg: map-get($map, background-color);

  @if $style == 'dark' {
    &.rz-shade-default { #{$border-prop}: rz-outlined-border-val($bg, $use-bc); color: #{$bg}; }
  }
  @else if $style == 'light' {
    @if $theme-dark == true {
      $c: map-get($map, color);
      &.rz-shade-default { #{$border-prop}: rz-outlined-border-val($c, $use-bc); color: #{$c}; }
    }
    @else {
      &.rz-shade-default { #{$border-prop}: rz-outlined-border-val($bg, $use-bc); color: #{$bg}; }
    }
  }
  @else if $style == 'base' {
    &.rz-shade-lighter { #{$border-prop}: rz-outlined-border-val(var(--rz-#{$style}-lighter), $use-bc); color: var(--rz-#{$style}-light); }
    &.rz-shade-light { #{$border-prop}: rz-outlined-border-val(var(--rz-#{$style}-light), $use-bc); color: var(--rz-#{$style}-light); }
    &.rz-shade-default { #{$border-prop}: rz-outlined-border-val($button-base-outlined-border-color, $use-bc); color: var(--rz-text-color); }
    &.rz-shade-dark { #{$border-prop}: rz-outlined-border-val(var(--rz-#{$style}-dark), $use-bc); color: var(--rz-#{$style}-dark); }
    &.rz-shade-darker { #{$border-prop}: rz-outlined-border-val(var(--rz-#{$style}-darker), $use-bc); color: var(--rz-#{$style}-darker); }
  }
  @else {
    @if ($fluent == true or $standard == true) and $theme-dark == true and $style == 'secondary' {
      &.rz-shade-lighter { #{$border-prop}: rz-outlined-border-val(var(--rz-#{$style}-lighter), $use-bc); color: var(--rz-#{$style}-light); }
      &.rz-shade-light   { #{$border-prop}: rz-outlined-border-val(var(--rz-#{$style}-light), $use-bc);   color: var(--rz-#{$style}-light); }
      &.rz-shade-default { #{$border-prop}: rz-outlined-border-val(var(--rz-#{$style}), $use-bc);         color: var(--rz-on-#{$style}); }
      &.rz-shade-dark    { #{$border-prop}: rz-outlined-border-val(var(--rz-#{$style}-dark), $use-bc);    color: var(--rz-#{$style}-dark); }
      &.rz-shade-darker  { #{$border-prop}: rz-outlined-border-val(var(--rz-#{$style}-darker), $use-bc);  color: var(--rz-#{$style}-darker); }
    } @else {
      &.rz-shade-lighter { #{$border-prop}: rz-outlined-border-val(var(--rz-#{$style}-lighter), $use-bc); color: var(--rz-#{$style}-light); }
      &.rz-shade-light { #{$border-prop}: rz-outlined-border-val(var(--rz-#{$style}-light), $use-bc); color: var(--rz-#{$style}-light); }
      &.rz-shade-default { #{$border-prop}: rz-outlined-border-val(var(--rz-#{$style}), $use-bc); color: var(--rz-#{$style}); }
      &.rz-shade-dark { #{$border-prop}: rz-outlined-border-val(var(--rz-#{$style}-dark), $use-bc); color: var(--rz-#{$style}-dark); }
      &.rz-shade-darker { #{$border-prop}: rz-outlined-border-val(var(--rz-#{$style}-darker), $use-bc); color: var(--rz-#{$style}-darker); }
    }
  }
  background-color: transparent;
}

@mixin text-color-shades($style, $map) {
  @if $style == 'dark' { color: #{map-get($map, background-color)}; }
  @else if $style == 'light' {
    @if $theme-dark == true { color: #{map-get($map, color)}; }
    @else { color: #{map-get($map, background-color)}; }
  } @else if $style == 'base' {
    &.rz-shade-lighter { color: var(--rz-#{$style}-lighter); }
    &.rz-shade-light { color: var(--rz-#{$style}-light); }
    &.rz-shade-default { color: inherit; }
    &.rz-shade-dark { color: var(--rz-#{$style}-dark); }
    &.rz-shade-darker { color: var(--rz-#{$style}-darker); }
  } @else {
    @if ($fluent == true or $standard == true) and $theme-dark == true and $style == 'secondary' {
      &.rz-shade-lighter { color: var(--rz-#{$style}-lighter); }
      &.rz-shade-light   { color: var(--rz-#{$style}-light); }
      &.rz-shade-default { color: var(--rz-on-#{$style}); }
      &.rz-shade-dark    { color: var(--rz-#{$style}-dark); }
      &.rz-shade-darker  { color: var(--rz-#{$style}-darker); }
    } @else {
      &.rz-shade-lighter { color: var(--rz-#{$style}-lighter); }
      &.rz-shade-light { color: var(--rz-#{$style}-light); }
      &.rz-shade-default { color: var(--rz-#{$style}); }
      &.rz-shade-dark { color: var(--rz-#{$style}-dark); }
      &.rz-shade-darker { color: var(--rz-#{$style}-darker); }
    }
  }
  background-color: transparent;
}

@mixin variant-hover-bg($style) {
  @if $style == 'light' { background-color: rgba(255, 255, 255, .12); }
  @else if $style == 'dark' { background-color: rgba(0, 0, 0, .12); }
  @else if $style == 'base' {
    @if $theme-dark == true { background-color: var(--rz-base-600); color: var(--rz-on-#{$style}-darker); }
    @else { background-color: var(--rz-base-200); color: var(--rz-on-#{$style}-lighter); }
  }
  @else { background-color: var(--rz-#{$style}-lighter); color: var(--rz-on-#{$style}-lighter); }
}