// @mixin interaction-dark($color){
// 	cursor: pointer;
// 	overflow: hidden;

// 	@if($color == $d-e12) { //color - Surface
// 		&:hover   {background-color:  darken($d-e12, 6%); }
// 		&:focus,
// 		&:active  {background-color:  darken($d-e12, 20%); }
// 	    & .ripple {background-color: $c-w; }
// 	}

// 	@if($color == $d-p) { //color - dark primary
// 		&:hover   {background-color:  darken($d-p, 8%); }
// 		&:focus,
// 		&:active  {background-color:  darken($d-p, 16%); }
// 	    & .ripple {background-color: $c-w; }
// 	}

// 	@include respond (table) { //remove hover on mobile
// 			&:hover { background-color: $color; }
// 	}

// }

@mixin interaction-dark-primary {
  //elem witch color primary
  cursor: pointer;
  overflow: hidden;

  &:hover {
    background-color: darken($md-dark-primary, 4%) !important;
    color: $md-dark-on-surface;
  }
  &:focus {
    background-color: darken($md-dark-primary, 4%);
  }
  &:active {
    background-color: darken($d-e12, 35%);
  }

  @include respond(table) {
    //remove hover on mobile
    &:hover {
      background-color: $md-dark-primary;
    }
    &:focus {
      background-color: $md-dark-primary;
    }
    &:active {
      background-color: $md-dark-primary;
    }
  }

  & .ripple {
    background-color: $c-w;
  }
}

@mixin interaction-dark-secondary {
  //elem witch color primary
  cursor: pointer;
  overflow: hidden;

  &:hover {
    background-color: darken($md-dark-secondary, 4%) !important;
    color: $md-dark-on-surface;
  }
  &:focus {
    background-color: darken($md-dark-secondary, 4%);
  }
  &:active {
    background-color: darken($d-e12, 35%);
  }

  @include respond(table) {
    //remove hover on mobile
    &:hover {
      background-color: $md-dark-secondary !important;
    }
    &:focus {
      background-color: $md-dark-secondary !important;
    }
    &:active {
      background-color: $md-dark-secondary !important;
    }
  }

  & .ripple {
    background-color: $c-w;
  }
}

@mixin interaction-dark-background {
  //elem witch color primary
  cursor: pointer;
  overflow: hidden;

  &:hover {
    background-color: darken($md-dark-background, 10%) !important;
    color: $md-dark-on-surface;
  }
  &:focus {
    background-color: darken($md-dark-background, 10%);
  }
  &:active {
    background-color: darken($d-e12, 35%);
  }

  @include respond(table) {
    //remove hover on mobile
    &:hover {
      background-color: $md-dark-background;
    }
    &:focus {
      background-color: $md-dark-background;
    }
    &:active {
      background-color: $md-dark-background;
    }
  }

  & .ripple {
    background-color: $c-w;
  }
}

@mixin interaction-dark-surface {
  //elem witch color primary
  cursor: pointer;
  overflow: hidden;

  &:hover {
    background-color: darken($md-dark-surface, 2%) !important;
    color: $md-dark-on-surface;
  }
  &:focus {
    background-color: darken($md-dark-surface, 10%);
  }
  &:active {
    background-color: darken($d-e12, 35%);
  }

  @include respond(table) {
    //remove hover on mobile
    &:hover {
      background-color: $md-dark-surface;
    }
    &:focus {
      background-color: $md-dark-surface;
    }
    &:active {
      background-color: $md-dark-surface;
    }
  }

  & .ripple {
    background-color: $c-w;
  }
}

@mixin interaction-dark-error {
  //elem witch color primary
  cursor: pointer;
  overflow: hidden;

  &:hover {
    background-color: darken($md-dark-error, 4%) !important;
    color: $md-dark-on-surface;
  }
  &:focus {
    background-color: darken($md-dark-error, 4%);
  }
  &:active {
    background-color: darken($d-e12, 35%);
  }

  @include respond(table) {
    //remove hover on mobile
    &:hover {
      background-color: $md-dark-error;
    }
    &:focus {
      background-color: $md-dark-error;
    }
    &:active {
      background-color: $md-dark-error;
    }
  }

  & .ripple {
    background-color: $c-w;
  }
}


@mixin interaction-dark-on-fab {
  //elem witch color primary
  cursor: pointer;
  overflow: hidden;

  &:hover {
    background-color: darken($md-dark-on-fab, 4%) !important;
    color: $md-dark-on-surface;
  }
  &:focus {
    background-color: darken($md-dark-on-fab, 4%);
  }
  &:active {
    background-color: darken($d-e12, 35%);
  }

  @include respond(table) {
    //remove hover on mobile
    &:hover {
      background-color: $md-dark-on-fab;
    }
    &:focus {
      background-color: $md-dark-on-fab;
    }
    &:active {
      background-color: $md-dark-on-fab;
    }
  }

  & .ripple {
    background-color: $c-w;
  }
}

@mixin interaction-dark-13 {
  &:hover {
    background-color: darken($md-dark-primary, 100%) !important;
  }
}

@mixin interaction-dark-14 {
  &:hover {
    background-color: $md-dark-hover !important;
    & svg {
      fill: $md-dark-on-surface;
    }
    & label {
      color: $md-dark-on-surface;
    }
  }
}

@mixin interaction-dark-15 {
  &:hover {
    color: $md-dark-text-primary;
  }
}

@mixin interaction-dark-16 {
  &:hover {
    fill: $md-dark-text-primary;
  }
}


@mixin interaction-dark-color {
  //elem witch color primary
  cursor: pointer;
  overflow: hidden;

  &:hover {
    background-color: lighten($c-pl, 24%) !important;
  }
  &:focus {
    background-color: darken($c-pl, 8%);
  }
  &:active {
    background-color: darken($c-pl, 8%);
  }

  @include respond(table) {
    //remove hover on mobile
    &:hover {
      background-color: $c-pl;
    }
    &:focus {
      background-color: $c-pl;
    }
    &:active {
      background-color: $c-pl;
    }
  }

  & .ripple {
    background-color: $c-w;
  }
}

@mixin interaction-dark-primary-text {
  &:hover {
    color: $md-dark-text-primary !important;
  }
}

// //All this should be delete after apply a general mixin

// //color-percent
// @mixin interaction-dark-init($color, $color-p, $color-ripple, $ripple-p){

// 	&:hover   {background-color: lighten($color, $color-p)}
// 	&:focus   {background-color: $color; }
//     &:active  {background-color: $color; }

// 	& .ripple {
// 		background-color: lighten($color-ripple, $ripple-p);
// 	}
// }