dotfiles/ags/scss/_lib_mixins.scss

// Common colors
$hovercolor: $surfaceContainerHigh;
$activecolor: $surfaceContainerHighest;
$rounding_verysmall: 0.477rem;
$rounding_small: 0.818rem;
$rounding_mediumsmall: 0.955rem;
$rounding_medium: 1.159rem;
$rounding_mediumlarge: 1.364rem;
$rounding_large: 1.705rem;

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

@mixin normal-rounding {
    border-radius: $rounding_medium;
    -gtk-outline-radius: $rounding_medium;
}

@mixin large-rounding {
    border-radius: $rounding_large;
    -gtk-outline-radius: $rounding_large;
}

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

// @mixin symbolic-icon {
//    -gtk-icon-theme: 'Adwaita';
// }

@mixin titlefont {
    // Geometric sans-serif
    font-family: "Gabarito", "Poppins", "Readex Pro", "Lexend", sans-serif;
}

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

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

@mixin icon-nerd {
    // Nerd Fonts
    font-family: "SpaceMono NF", "SpaceMono Nerd Font", "JetBrains Mono NF",
        "JetBrains Mono 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 NF", "JetBrains Mono Nerd Font",
        "JetBrains Mono NL", "SpaceMono NF", "SpaceMono Nerd Font", monospace;
}

@mixin readingfont {
    // The most readable fonts, for a comfortable reading experience
    // in stuff like AI chat on sidebar
    font-family: "Readex Pro", "Lexend", "Noto Sans", sans-serif;
    // font-weight: 500;
}

@mixin subtext {
    color: $subtext;
}

@mixin actiontext {
    color: $actiontext;
}

$elevation_margin: 0.476rem;

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

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

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

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

@mixin menu_decel {
    transition: 300ms cubic-bezier(0.1, 1, 0, 1);
}

@mixin menu_decel_fast {
    transition: 170ms cubic-bezier(0.1, 1, 0, 1);
}

@mixin menu_accel {
    transition: 160ms cubic-bezier(0.38, 0.04, 1, 0.07);
}

@mixin menu_accel_fast {
    transition: 100ms cubic-bezier(0.38, 0.04, 1, 0.07);
}

@mixin fluent_decel {
    transition: 200ms cubic-bezier(0.1, 1, 0, 1);
}

@mixin fluent_decel_long {
    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);
}

@mixin element_decel {
    transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
}

@mixin element_bounceOut {
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@mixin element_accel {
    transition: 300ms cubic-bezier(0.55, 0, 1, 0.45);
}

@mixin element_easeInOut {
    transition: 300ms cubic-bezier(0.85, 0, 0.15, 1);
}

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

@mixin elevation-border {
    border-top: 1px solid $surfaceContainer;
    border-left: 1px solid $surfaceContainer;
    border-right: 1px solid $surfaceContainer;
    border-bottom: 1px solid $surfaceContainer;
}

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

$white: white;
$black: black;