// Ionic Mixins
// forward the global mixin to be used on component scope
@forward "../mixins";
// use global mixins on this ionic.mixin context
@use "../mixins" as mixins;
@use "../../foundations/ionic.vars.scss" as tokens;

// Pressed mixin to be used on pseudo elements for the Ionic Theme pressed state
//
// ex: :host(.ion-activated) .toggle-icon:after {
//       @include globals.pressed-state();
//      }
//
// --------------------------------------------------
@mixin pressed-state() {
  @include mixins.position(0, 0, 0, 0);

  position: absolute;

  background-color: tokens.$ion-state-press;

  content: "";
}

// Disabled mixin to be used on pseudo elements for the Ionic Theme disabled state
//
// ex: :host(.checkbox-disabled) .native-wrapper:after {
//       @include globals.disable-state();
//      }
//
// --------------------------------------------------
@mixin disabled-state() {
  @include mixins.position(0, 0, 0, 0);

  position: absolute;

  background-color: tokens.$ion-state-disabled;

  content: "";

  pointer-events: none;
}

// Focused mixin to be used on regular elements for the Ionic Theme focused state
//
// ex: :host(.ion-focused) .toggle-icon {
//       @include globals.focused-state();
//      }
//
// --------------------------------------------------
@mixin focused-state($width: null, $style: null, $color: null, $addOffset: true) {
  // Use default values if null is passed
  $width: if($width != null, $width, tokens.$ion-border-size-050);
  $style: if($style != null, $style, tokens.$ion-border-style-solid);
  $color: if($color != null, $color, tokens.$ion-border-focus-default);

  @if $addOffset {
    outline-offset: $width;
  }

  outline: $width $style $color;
}

// Typography mixin to be used with typography scss variables (ionic.vars.scss)
//
// ex: @include typography($ion-heading-h3-medium);
//
// --------------------------------------------------
@mixin typography($properties) {
  font-family: map-get($properties, font-family);
  font-size: map-get($properties, font-size);
  font-weight: map-get($properties, font-weight);

  letter-spacing: map-get($properties, letter-spacing);
  line-height: map-get($properties, line-height);

  text-decoration: map-get($properties, text-decoration);
  text-transform: map-get($properties, text-transform);
}