/* stylelint-disable csstools/value-no-unknown-custom-properties */
@mixin typography($style, $size, $weight: __default__) {
  $prefix: #{$style}-#{$size};

  @if $weight != __default__ {
    $prefix: #{$prefix}-#{$weight};
  }

  font-family:
    var(--typography-text-styles-#{$prefix}-font-family),
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  font-weight: var(--typography-text-styles-#{$prefix}-font-weight);
  line-height: var(--typography-text-styles-#{$prefix}-line-height);
  font-size: var(--typography-text-styles-#{$prefix}-font-size);
  text-transform: var(--typography-text-styles-#{$prefix}-text-case);
  letter-spacing: var(--typography-text-styles-#{$prefix}-letter-spacing);
}
/* stylelint-enable csstools/value-no-unknown-custom-properties */

@mixin inner-border($color, $size: 1px, $element: after) {
  position: relative;
  overflow: hidden;

  &::#{$element} {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 $size $color;
    @content;
  }
}

@mixin feature-flag($flag, $value) {
  $open: "[data-ff-";
  $v: "=#{$value}";
  $close: "]";
  $selector: #{$open}#{$flag}#{$v}#{$close};

  :global(#{$selector}) & {
    @content;
  }
}

// Manual shadows
.neg-1dp {
  box-shadow:
    inset var(--elevation-neg-1dp-0-x) var(--elevation-neg-1dp-0-y) var(--elevation-neg-1dp-0-blur)
      var(--elevation-neg-1dp-0-spread) var(--elevation-neg-1dp-0-color),
    inset var(--elevation-neg-1dp-1-x) var(--elevation-neg-1dp-1-y) var(--elevation-neg-1dp-1-blur)
      var(--elevation-neg-1dp-1-spread) var(--elevation-neg-1dp-1-color);
}

.pos-1dp {
  box-shadow:
    inset var(--elevation-1dp-0-x) var(--elevation-1dp-0-y) var(--elevation-1dp-0-blur) var(--elevation-1dp-0-spread)
      var(--elevation-1dp-0-color),
    inset var(--elevation-1dp-1-x) var(--elevation-1dp-1-y) var(--elevation-1dp-1-blur) var(--elevation-1dp-1-spread)
      var(--elevation-1dp-1-color),
    var(--elevation-1dp-2-x) var(--elevation-1dp-2-y) var(--elevation-1dp-2-blur) var(--elevation-1dp-2-spread)
      var(--elevation-1dp-2-color);
}

.pos-2dp {
  box-shadow:
    inset var(--elevation-2dp-0-x) var(--elevation-2dp-0-y) var(--elevation-2dp-0-blur) var(--elevation-2dp-0-spread)
      var(--elevation-2dp-0-color),
    inset var(--elevation-2dp-1-x) var(--elevation-2dp-1-y) var(--elevation-2dp-1-blur) var(--elevation-2dp-1-spread)
      var(--elevation-2dp-1-color),
    var(--elevation-2dp-2-x) var(--elevation-2dp-2-y) var(--elevation-2dp-2-blur) var(--elevation-2dp-2-spread)
      var(--elevation-2dp-2-color),
    var(--elevation-2dp-3-x) var(--elevation-2dp-3-y) var(--elevation-2dp-3-blur) var(--elevation-2dp-3-spread)
      var(--elevation-2dp-3-color);
}

.pos-3dp {
  box-shadow:
    inset var(--elevation-3dp-0-x) var(--elevation-3dp-0-y) var(--elevation-3dp-0-blur) var(--elevation-3dp-0-spread)
      var(--elevation-3dp-0-color),
    inset var(--elevation-3dp-1-x) var(--elevation-3dp-1-y) var(--elevation-3dp-1-blur) var(--elevation-3dp-1-spread)
      var(--elevation-3dp-1-color),
    var(--elevation-3dp-2-x) var(--elevation-3dp-2-y) var(--elevation-3dp-2-blur) var(--elevation-3dp-2-spread)
      var(--elevation-3dp-2-color),
    var(--elevation-3dp-3-x) var(--elevation-3dp-3-y) var(--elevation-3dp-3-blur) var(--elevation-3dp-3-spread)
      var(--elevation-3dp-3-color);
}
