/* -- BASE -- */

@mixin hide-if-empty() {
  &:empty {
    display: none;
  }
}

@mixin font($weight, $size: inherit, $line-height) {
  font-size: $size;
  font-style: normal;
  font-weight: $weight;
  line-height: $line-height;
}

@mixin row() {
  display: flex;
}

@mixin column($align) {
  display: flex;
  flex-direction: column;
  align-items: $align;
}

@mixin respond-to($breakpoint) {
  @if $breakpoint == desktop {
    @media (max-width: 1440px) { @content; }
  } @else if $breakpoint == laptop {
    @media (max-width: 1024px) { @content; }
  } @else if $breakpoint == tablet {
    @media (max-width: 768px) { @content; }
  } @else if $breakpoint == large-mobile {
    @media (max-width: 425px) { @content; }
  } @else if $breakpoint == medium-mobile {
    @media (max-width: 375px) { @content; }
  }
}

/* -- DEPENDENT -- */

@mixin row-gap($gap, $align: flex-start) {
  @include row;

  gap: $gap;
  align-items: $align;
}

@mixin col-gap($gap, $align: flex-start) {
  @include column($align);

  gap: $gap;
}