@use './variables' as *;

@mixin flex($justify, $align: flex-start) {
  display: flex;
  justify-content: $justify;
  align-items: #{$align};
}

@mixin text($size, $color, $weight: regular) {
  @warn "This text mixin is deprecated!";
  font-family: $font-stack;
  font-size: map-get($sizeText, $size);
  color: map-get($colors, $color);
  font-weight: map-get($fonts, #{$weight});
}

@mixin box($bg, $radius, $border: none) {
  @warn "This box mixin is deprecated!";
  @if ($bg == transparent) {
    background: $bg;
  } @else {
    background: map-get($colors, $bg);
  }
  @if ($border == 'none') {
    border: $border;
  } @else if ($border != 'none') {
    border: map-get($borders, md) solid map-get($colors, $border);
  }
  border-radius: $radius;
}

@mixin focusBorder() {
  outline: none;
  box-shadow: 0 0 0 3px map-get($colors, foris-white),
    0 0 0 5px map-get($colors, darwined-blue-30);
}

// Mixins using css vars
@mixin box-style($bg, $radius, $border: none) {
  @if ($bg == transparent) {
    background-color: transparent;
  } @else {
    background-color: var(--color-#{$bg});
  }
  @if ($border == 'none') {
    border: $border;
  } @else if ($border != 'none') {
    border: 1px solid var(--color-#{$border});
  }
  border-radius: $radius;
}

@mixin font-style($size, $color, $weight: regular) {
  font-family: $font-stack;
  font-size: map-get($sizeText, $size);
  color: var(--color-#{$color});
  font-weight: map-get($fonts, #{$weight});
}

@mixin focus-style($theme: '') {
  border-radius: 8px;
  outline: none;

  @if $theme == 'dark' {
    box-shadow: 0 0 0 3px var(--color-gray-90), 0 0 0 5px var(--color-info-30);
  } @else {
    box-shadow: 0 0 0 3px var(--color-neutral-00),
      0 0 0 5px var(--color-info-30);
  }
}