// Common colors
$hovercolor: rgba(128, 128, 128, 0.3);
$activecolor: rgba(128, 128, 128, 0.7);
$rounding_small: 0.818rem;
$rounding_mediumsmall: 0.955rem;
$rounding_medium: 1.159rem;
$rounding_mediumlarge: 1.364rem;
$rounding_large: 1.705rem;

.test {
  background-image: linear-gradient(
    45deg,
    #f4d609 0%,
    #f4d609 10%,
    #212121 10%,
    #212121 20%,
    #f4d609 20%,
    #f4d609 30%,
    #212121 30%,
    #212121 40%,
    #f4d609 40%,
    #f4d609 50%,
    #212121 50%,
    #212121 60%,
    #f4d609 60%,
    #f4d609 70%,
    #212121 70%,
    #212121 80%,
    #f4d609 80%,
    #f4d609 90%,
    #212121 90%,
    #212121 100%
  );
  background-repeat: repeat;
}

.test-size {
  min-height: 3rem;
  min-width: 3rem;
}

// Common rules
@mixin small-rounding {
  border-radius: $rounding_small; // 10px
  -gtk-outline-radius: $rounding_small; // 10px
}

@mixin normal-rounding {
  border-radius: $rounding_medium; // small-rounding + 5px
  -gtk-outline-radius: $rounding_medium; // small-rounding + 5px
}

@mixin large-rounding {
  border-radius: $rounding_large; // normal-rounding + 10px
  -gtk-outline-radius: $rounding_large; // normal-rounding + 10px
}

@mixin full-rounding {
  border-radius: 9999px;
  -gtk-outline-radius: 9999px;
}

@mixin titlefont {
  // Geometric sans-serif
  font-family: "Noto Sans", "Gabarito", "Lexend", sans-serif;
}

.txt-title {
  @include titlefont;
  font-size: 2.045rem;
}

.txt-title-small {
  @include titlefont;
  font-size: 1.364rem;
}

@mixin mainfont {
  // Other clean sans-serif
  font-family: "AR One Sans", "Inter", "Roboto", "Noto Sans", sans-serif;
  // font-weight: 500;
}

@mixin icon-material {
  // Material Design Icons
  font-family: "Material Symbols Rounded", "Material Symbols Outlined", "Material Symbols Sharp";
}

@mixin icon-nerd {
  // Nerd Fonts
  font-family: "SpaceMono Nerd Font", "JetBrainsMono Nerd Font", monospace;
}

@mixin techfont {
  // Monospace for sys info n stuff. Doesn't have to be a nerd font, but it's cool.
  font-family: "JetBrains Mono Nerd Font", "JetBrains Mono NL", "SpaceMono Nerd Font", monospace;
}

.techfont {
  @include techfont;
}

@mixin subtext {
  color: $subtext;
}

@mixin actiontext {
  color: $actiontext;
}

@mixin elevation-safe {
  background: $surface;
  color: $onSurface;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.69);
  margin: 7px;
}

$elevation2_margin: 7px;

@mixin elevation2 {
  box-shadow: 0px 2px 3px transparentize($shadow, 0.55);
  margin: $elevation2_margin;
}

@mixin elevation2-margin {
  margin: $elevation2_margin;
}

@mixin elevation2-padding {
  padding: $elevation2_margin;
}

@mixin elevation3 {
  box-shadow: 0px 2px 5px $shadow;
  margin: 7px;
}

@mixin md3_decel {
  transition: 200ms cubic-bezier(0.05, 0.7, 0.1, 1);
}

@mixin md3_decel_fast {
  transition: 170ms cubic-bezier(0.05, 0.7, 0.1, 1);
}

@mixin md3_accel {
  transition: 150ms cubic-bezier(0.3, 0, 0.8, 0.15);
}

@mixin md3_accel_fast {
  transition: 100ms cubic-bezier(0.3, 0, 0.8, 0.15);
}

@mixin fluent_decel {
  // Used for small transitions, as this looks clear
  transition: 200ms cubic-bezier(0.1, 1, 0, 1);
}

@mixin fluent_decel_long {
  // Used for small transitions, as this looks clear
  transition: 1000ms cubic-bezier(0.1, 1, 0, 1);
}

@mixin fluent_accel {
  transition: 150ms cubic-bezier(0.42, 0, 1, 1);
}

@mixin noanim {
  transition: 0ms;
}

@mixin anim-enter {
  transition: 200ms cubic-bezier(0.05, 0.7, 0.1, 1);
}

@mixin anim-exit {
  transition: 150ms cubic-bezier(0.3, 0, 0.8, 0.15);
}

@keyframes flyin-top {
  from {
    margin-top: -2.795rem;
  }

  to {
    margin-top: 0rem;
  }
}

@keyframes flyin-bottom {
  from {
    margin-top: 4.841rem;
    margin-bottom: -4.841rem;
  }

  to {
    margin-bottom: 0rem;
    margin-top: 0rem;
  }
}

@function tint($color, $percentage) {
  @return mix(rgb(245, 250, 255), $color, $percentage);
}

@function shade($color, $percentage) {
  @return mix(rgb(0, 0, 0), $color, $percentage);
}

.no-anim {
  @include noanim;
}

.txt {
  color: $onBackground;
}

.txt-shadow {
  text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.69);
  margin: 10px;
}

.txt-badonkers {
  @include mainfont;
  font-size: 3rem;
}

.txt-tiddies {
  @include mainfont;
  font-size: 2.7273rem;
}

.txt-hugeass {
  @include mainfont;
  font-size: 1.8182rem;
}

.txt-larger {
  @include mainfont;
  font-size: 1.6363rem;
}

.txt-large {
  //16pt
  @include mainfont;
  font-size: 1.4545rem;
}

.txt-norm {
  //14pt
  @include mainfont;
  font-size: 1.2727rem;
}

.txt-small {
  //12pt
  @include mainfont;
  font-size: 1.0909rem;
}

.txt-smallie {
  //11pt
  @include mainfont;
  font-size: 1rem;
}

.txt-smaller {
  //10pt
  @include mainfont;
  font-size: 0.9091rem;
}

.txt-smaller-offset {
  margin-top: -0.136rem;
}

.txt-tiny {
  @include mainfont;
  font-size: 0.7273rem;
}

.txt-subtext {
  @include subtext;
}

.txt-action {
  @include actiontext;
}

.txt-semibold {
  font-weight: 500;
}

.txt-bold {
  font-weight: bold;
}

.titlefont {
  @include titlefont;
}

.mainfont {
  @include mainfont;
}

.icon-material {
  @include icon-material;
}

.separator-circle {
  @include full-rounding;
  background-color: $onSurface;
  margin: 0rem 0.682rem;
  min-width: 0.545rem;
  min-height: 0.545rem;
}

$overlay1: mix($onSurface, rgba(0, 0, 0, 0), 25%);
$overlay2: mix($onSurface, rgba(0, 0, 0, 0), 40%);

.spacing-v-15 > box {
  margin-bottom: 1.023rem;
}

.spacing-v-15 > box:last-child {
  margin-bottom: 0rem;
}

.spacing-v-15 > scrolledwindow {
  margin-bottom: 1.023rem;
}

.spacing-v-15 > scrolledwindow:last-child {
  margin-bottom: 0rem;
}

.spacing-v-15 > revealer {
  margin-bottom: 1.023rem;
}

.spacing-v-15 > revealer:last-child {
  margin-bottom: 0rem;
}

.spacing-v-15 > label {
  margin-bottom: 1.023rem;
}

.spacing-v-15 > label:last-child {
  margin-bottom: 0rem;
}

.spacing-h-15 > box {
  margin-right: 1.023rem;
}

.spacing-h-15 > box:last-child {
  margin-right: 0rem;
}

.spacing-h-15 > stack {
  margin-right: 1.023rem;
}

.spacing-h-15 > stack:last-child {
  margin-right: 0rem;
}

.spacing-h-15 > label {
  margin-right: 1.023rem;
}

.spacing-h-15 > label:last-child {
  margin-right: 0rem;
}

.spacing-h-15 > button {
  margin-right: 1.023rem;
}

.spacing-h-15 > button:last-child {
  margin-right: 0rem;
}

.spacing-v-5 > box {
  margin-bottom: 0.341rem;
}

.spacing-v-5 > box:last-child {
  margin-bottom: 0rem;
}

.spacing-v-5 > label {
  margin-bottom: 0.341rem;
}

.spacing-v-5 > label:last-child {
  margin-bottom: 0rem;
}

.spacing-v-5 > button {
  margin-bottom: 0.341rem;
}

.spacing-v-5 > button:last-child {
  margin-bottom: 0rem;
}

.spacing-v-5-revealer > revealer > box {
  margin-bottom: 0.341rem;
}

.spacing-v-5-revealer > revealer:last-child > box {
  margin-bottom: 0rem;
}

.spacing-h-5 > box {
  margin-right: 0.341rem;
}

.spacing-h-5 > box:last-child {
  margin-right: 0rem;
}

.spacing-h-5 > button {
  margin-right: 0.341rem;
}

.spacing-h-5 > button:last-child {
  margin-right: 0rem;
}

.spacing-h-5 > label {
  margin-right: 0.341rem;
}

.spacing-h-5 > label:last-child {
  margin-right: 0rem;
}

.spacing-h-5 > widget > box {
  margin-right: 0.341rem;
}

.spacing-h-5 > widget:last-child > box {
  margin-right: 0rem;
}

.spacing-h-5 > progressbar {
  margin-right: 0.341rem;
}

.spacing-h-5 > progressbar:last-child {
  margin-right: 0rem;
}

.spacing-h-5 > scrolledwindow {
  margin-right: 0.341rem;
}

.spacing-h-5 > scrolledwindow:last-child {
  margin-right: 0rem;
}

.spacing-h-5 > scrollbar {
  margin-right: 0.341rem;
}

.spacing-h-5 > scrollbar:last-child {
  margin-right: 0rem;
}

.spacing-v-minus5 > box {
  margin-bottom: -0.341rem;
}

.spacing-v-minus5 > box:last-child {
  margin-bottom: 0rem;
}

.spacing-v-minus5 > label {
  margin-bottom: -0.341rem;
}

.spacing-v-minus5 > label:last-child {
  margin-bottom: 0rem;
}

.spacing-h-10 > box {
  margin-right: 0.682rem;
}

.spacing-h-10 > box:last-child {
  margin-right: 0rem;
}

.spacing-h-10 > flowboxchild > button {
  margin-right: 0.682rem;
}

.spacing-h-10 > flowboxchild:last-child > button {
  margin-right: 0rem;
}

.spacing-h-10 > label {
  margin-right: 0.682rem;
}

.spacing-h-10 > label:last-child {
  margin-right: 0rem;
}

.spacing-h-10 > revealer {
  margin-right: 0.682rem;
}

.spacing-h-10 > revealer:last-child {
  margin-right: 0rem;
}

.spacing-h-10 > overlay {
  margin-right: 0.682rem;
}

.spacing-h-10 > overlay:last-child {
  margin-right: 0rem;
}

.spacing-h-10 > button {
  margin-right: 0.682rem;
}

.spacing-h-10 > button:last-child {
  margin-right: 0rem;
}

.spacing-h-10 > label {
  margin-right: 0.682rem;
}

.spacing-h-10 > label:last-child {
  margin-right: 0rem;
}

.spacing-h-10 > widget {
  margin-right: 0.682rem;
}

.spacing-h-10 > widget:last-child {
  margin-right: 0rem;
}

.spacing-h-10 > stack {
  margin-right: 0.682rem;
}

.spacing-h-10 > stack:last-child {
  margin-right: 0rem;
}

.spacing-v-10 > box {
  margin-bottom: 0.682rem;
}

.spacing-v-10 > box:last-child {
  margin-bottom: 0rem;
}

.spacing-v-10 > button {
  margin-bottom: 0.682rem;
}

.spacing-v-10 > button:last-child {
  margin-bottom: 0rem;
}

.anim-enter {
  @include anim-enter;
}

.anim-exit {
  @include anim-exit;
}

@mixin elevation-border-softer {
  border-top: 1px solid mix($t_t_surface, $t_onSurface, 80%);
  border-left: 1px solid mix($t_t_surface, $t_onSurface, 80%);
  border-right: 1px solid mix($t_t_surface, $t_onSurface, 85%);
  border-bottom: 1px solid mix($t_t_surface, $t_onSurface, 85%);
}

@mixin elevation-border {
  border-top: 1px solid mix($t_t_surface, $onSurface, 90%);
  border-left: 1px solid mix($t_t_surface, $onSurface, 90%);
  border-right: 1px solid mix($t_t_surface, $onSurface, 95%);
  border-bottom: 1px solid mix($t_t_surface, $onSurface, 95%);
}

@mixin elevation-border-heavier {
  border-top: 1px solid mix($t_t_surface, $onSurface, 80%);
  border-left: 1px solid mix($t_t_surface, $onSurface, 80%);
  border-right: 1px solid mix($t_t_surface, $onSurface, 85%);
  border-bottom: 1px solid mix($t_t_surface, $onSurface, 85%);
}

@mixin elevation-border-transparent {
  border-top: 1px solid transparent;
}

@mixin button-minsize {
  min-width: 2.727rem;
  min-height: 2.727rem;
}

.button-minsize {
  @include button-minsize;
}

@mixin group-padding {
  padding: 0.341rem;
}

.group-padding {
  @include group-padding;
}

.margin-right-5 {
  margin-right: 0.341rem;
}

.margin-left-5 {
  margin-left: 0.341rem;
}

.margin-top-5 {
  margin-top: 0.341rem;
}

.margin-bottom-5 {
  margin-bottom: 0.341rem;
}

.margin-right-10 {
  margin-right: 0.682rem;
}

.margin-left-10 {
  margin-left: 0.682rem;
}

.margin-top-10 {
  margin-top: 0.682rem;
}

.margin-bottom-10 {
  margin-bottom: 0.682rem;
}

.invisible {
  opacity: 0;
  background-color: transparent;
  color: transparent;
}

.spacing-h--5 > box {
  margin-right: -0.341rem;
}

.spacing-h--5 > box:last-child {
  margin-right: 0rem;
}

.spacing-v--5 > box {
  margin-bottom: -0.341rem;
}

.spacing-v--5 > box:last-child {
  margin-bottom: 0rem;
}

.spacing-h--20 > box {
  margin-left: -1.364rem;
}

.spacing-h--20 > box:first-child {
  margin-left: 0rem;
}

$white: white;
$black: black;

.instant {
  transition: 0ms;
}

.md3_decel {
  @include md3_decel;
}