/* Path: Frontend/src/styles/tools/_mixins.scss */

@use "./breakpoints" as *;

@mixin respond-up($breakpoint) {
  @if $breakpoint == mobile {
    @media (min-width: $breakpoint-mobile) {
      @content;
    }
  } @else if $breakpoint == tablet {
    @media (min-width: $breakpoint-tablet) {
      @content;
    }
  } @else if $breakpoint == desktop {
    @media (min-width: $breakpoint-desktop) {
      @content;
    }
  }
}

@mixin respond-down($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: calc($breakpoint-mobile - 0.01rem)) {
      @content;
    }
  } @else if $breakpoint == tablet {
    @media (max-width: calc($breakpoint-tablet - 0.01rem)) {
      @content;
    }
  } @else if $breakpoint == desktop {
    @media (max-width: calc($breakpoint-desktop - 0.01rem)) {
      @content;
    }
  }
}

@mixin interactive-frame(
  $background: var(--color-surface),
  $border: var(--color-border),
  $color: var(--color-text-muted),
  $radius: var(--radius-md)
) {
  border: 1px solid $border;
  border-radius: $radius;
  background: $background;
  color: $color;
}

@mixin interactive-frame-hover(
  $background: var(--color-surface-hover),
  $border: var(--color-border-strong),
  $color: var(--color-text)
) {
  &:hover {
    background: $background;
    border-color: $border;
    color: $color;
    text-decoration: none;
  }
}

@mixin text-caption {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-caption);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
}

@mixin text-label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  line-height: var(--line-height-label);
  letter-spacing: var(--letter-spacing-label);
}

@mixin text-body {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
}

@mixin text-title {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-title);
  line-height: var(--line-height-title);
  letter-spacing: var(--letter-spacing-title);
}

@mixin text-heading {
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}

@mixin text-display {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
}