src/css/mixins.scss
@mixin flexify(
  $direction: row,
  $justify: space-between,
  $align: center,
  $gap: 0px
) {
  display: flex !important;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
  gap: $gap;
}

@mixin flexify-inline(
  $direction: row,
  $justify: space-between,
  $align: center
) {
  display: inline-flex !important;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}

@mixin dark-mode {
  body.body--dark {
    @content;
  }
}

@mixin light-mode {
  body.body--light {
    @content;
  }
}

@mixin mobile {
  @media (max-width: 599px) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: 1024px) {
    @content;
  }
}

@mixin electron {
  body.electron {
    @content;
  }
}

@mixin tablet {
  @media (min-width: 600px) and (max-width: 1023px) {
    @content;
  }
}

@mixin tablet-plus {
  @media (min-width: 600px) {
    @content;
  }
}

@mixin line-limit($lines) {
  overflow: hidden;
  display: -webkit-box !important;

  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
}

@mixin reset-input {
  background: transparent;
  &:focus {
    outline: none;
  }

  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  &[type='number'] {
    -moz-appearance: textfield;
  }
}

@mixin sticky-header {
  position: sticky;
  top: -1px;
  z-index: 1000;
}

@mixin mobile-footer-padding($offset: 0px) {
  @include mobile {
    padding-bottom: calc(var(--footer-height) + #{$offset});
  }
}

@mixin fit {
  height: 100vh;
  width: 100vw;
  height: 100dvh;
  width: 100dvw;
}
