// Calculates font size in REMs with a pixel fallback.
@mixin fontSize($size) {
  font-size: $size;
  font-size: calc-rem($size);
}

// ==========================================================================
// BEM Naming Functions
// ==========================================================================
// Element Mixin
@mixin e($element) {
  &__#{$element} {
    @content;
  }
}

// Modifier Mixin
@mixin m($modifier) {
  &--#{$modifier} {
    @content;
  }
}

// Generate ::before or ::after pseudo-element shapes
@mixin p-el($el-name, $h: 'null', $w: 'null') {
  @if $el-name == 'before' or $el-name == 'after' {
    &::#{$el-name} {
      @extend %pseudos;
      width: $w;
      height: $h;
      @content;
    }
  } @else {
    @error '"#{$el-name}" is not a valid pseudo element.';
  }
}

// ==========================================================================
// Media Query Functions
// ==========================================================================
@mixin media-q($break) {
  @if $break == 'small' {
    @media (min-width: map-get($breakpoints, 'xs')) and (max-width: map-get($breakpoints, 'md')) {
      @content;
    }
  } @else if $break == 'medium' {
    @media (min-width: map-get($breakpoints, 'md') + 1) {
      @content;
    }
  } @else if $break == 'large' {
    @media (min-width: map-get($breakpoints, 'lg')) {
      @content;
    }
  } @else if $break == 'x-large' {
    @media (min-width: map-get($breakpoints, 'xl')) {
      @content;
    }
  } @else if $break == 'xx-large' {
    @media (min-width: map-get($breakpoints, 'xxl')) {
      @content;
    }
  } @else {
    @error '"#{$break}" is not a valid breakpoint. Please enter a supported value (e.g. "small", "medium" or "large")';
  }
}

// ==========================================================================
// Sized-control button v2 metrics
// ==========================================================================
@mixin btn-size($height, $min-width, $padding-x, $font-size, $line-height) {
  height: $height;
  min-width: $min-width;
  padding: 0 $padding-x;
  font-size: $font-size;
  font-weight: $font-weight-semibold;
  line-height: $line-height;
  letter-spacing: 0;
  border-radius: calc-rem($border-radius-large);
  text-align: center;
}

@mixin badge-size($padding-y, $padding-x, $font-size, $icon-size) {
  --badge-icon-size: #{$icon-size};
  padding: $padding-y $padding-x;

  @include fontSize($font-size);
}

// Step for the button-toggle size scale, applied to Material's toggle internals.
@mixin toggle-size($height, $min-width, $font-size, $padding-x) {
  .mat-button-toggle {
    height: $height;

    .mat-button-toggle-button {
      height: $height;
      min-width: $min-width;
    }

    .mat-button-toggle-label-content {
      font-size: $font-size;
      padding: 0 $padding-x;
    }
  }
}