@use "variables" as *;

@mixin flex-center {
  display: flex;
  align-items: center;
}



@mixin blue-filter{
  filter: brightness(0) saturate(100%) invert(13%) sepia(97%) saturate(1892%) hue-rotate(210deg) brightness(97%) contrast(112%);
}

@mixin gray-filter{
  filter: brightness(0) saturate(100%) invert(85%) sepia(0%) saturate(3380%) hue-rotate(174deg) brightness(90%) contrast(94%);
}

@mixin black-filter{
  filter: brightness(0) saturate(100%) invert(7%) sepia(31%) saturate(1125%) hue-rotate(182deg) brightness(95%) contrast(94%);
}
@mixin white-filter{
  filter: brightness(0) saturate(100%) invert(100%) sepia(64%) saturate(7%) hue-rotate(175deg) brightness(115%) contrast(100%);
}


@mixin grid-center {
  display: grid;
  place-items: center;
}

@mixin responsive($breakpoint, $type: max) {
  $size: null;

  @if $breakpoint == sm {
    $size: 33.75rem; // 540px
  } @else if $breakpoint == md {
    $size: 45rem; // 720px
  } @else if $breakpoint == lg {
    $size: 60rem; // 960px
  } @else if $breakpoint == xl {
    $size: 71.25rem; // 1140px
  } @else if $breakpoint == 2xl {
    $size: 82.5rem; // 1326px
  } @else if $breakpoint == 3xl {
    $size: 95rem; // 1520px
  }

  @if $size != null {
    @if $type == max {
      @media (min-width: #{$size}) {
        @content;
      }
    }
  }
}