@use "sass:color";
@use "scheme";
@use "font";

$scale: 0.068rem;
@function s($value: 1) {
    @return $value * $scale;
}

@mixin rounded($all, $tl: $all, $tr: $all, $br: $all, $bl: $all) {
    border-radius: s($tl) s($tr) s($br) s($bl);
    -gtk-outline-radius: s($tl) s($tr) s($br) s($bl);
}

@mixin border($colour, $alpha: 1, $width: 1, $style: solid) {
    border: s($width) $style color.change($colour, $alpha: $alpha);
}

@mixin shadow($colour: black, $alpha: 0.4, $x: 2, $y: 3, $blur: 8, $spread: 0) {
    box-shadow: s($x) s($y) s($blur) s($spread) color.change($colour, $alpha: $alpha);
}

@mixin spacing($val: 5, $vertical: false) {
    $dir: if($vertical, bottom, right);

    & > *:not(:last-child) {
        margin-#{$dir}: s($val);
    }
}

@mixin element-decel($duration: 200ms) {
    transition: $duration cubic-bezier(0, 0.55, 0.45, 1);
}

@mixin fluent-decel($duration: 200ms) {
    transition: $duration cubic-bezier(0.1, 1, 0, 1);
}

@mixin overshot {
    transition-timing-function: cubic-bezier(0.05, 0.9, 0.1, 1.1);
}

@mixin ease-in-out {
    transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
}

@mixin popdown-window($colour) {
    @include rounded(8);
    @include border($colour, 0.4, 2);
    @include shadow;
    @include font.mono;

    background-color: scheme.$mantle;
    color: $colour;
    padding: s(10) s(12);
    font-size: s(14);

    .header {
        @include spacing(8);

        padding: 0 s(5);
        margin-bottom: s(8);
        font-size: s(15);

        button {
            @include rounded(5);
            @include element-decel;

            padding: s(3) s(8);

            &:hover,
            &:focus {
                background-color: scheme.$surface0;
            }

            &:active {
                background-color: scheme.$surface1;
            }

            &.enabled {
                background-color: $colour;
                color: scheme.$base;

                &:hover,
                &:focus {
                    background-color: color.mix($colour, scheme.$base, 80%);
                }

                &:active {
                    background-color: color.mix($colour, scheme.$base, 70%);
                }
            }
        }
    }

    .icon {
        font-size: s(32);
    }
}