@mixin widget($radii: $widget_radius){
    border-radius: $radii;
    color: $fg_color;
    background-color: $widget_bg;
    box-shadow: inset 0 0 0 $border_width $border_color;
}

@mixin button($flat: false, $interactive: true, $radii: $radii, $focusable: false){
    border-radius: $radii;
    color: $fg_color;
    @if $flat{
        background-color: transparent;
        background-image: none;
        box-shadow: none;
    }@else{
        background-color: $button_bg;
        box-shadow: inset 0 0 0 $border_width $border_color;
    }
    @if $interactive{
        @if $focusable {
            &:focus{
                box-shadow: inset 0 0 0 $border_width $accent;
                background-color: $hover;
                color: $hover_fg;
            }
        }
        &:hover{
            box-shadow: inset 0 0 0 $border_width $border_color;
            background-color: $hover;
            color: $hover_fg;
        }
        &:active{
            box-shadow: inset 0 0 0 $border_width $border_color;
            background-color: $accent;
            color: $accent_fg;
        }
    }
}

@mixin floating_widget($shadow: true, $padding: $popover_padding){
    @if $shadow {
        box-shadow: 3px 3px 4.5px 0 rgba(0,0,0,0.6),
                    inset 0 0 0 $border_width $popover_border_color;
    } @else {
        box-shadow: inset 0 0 0 $border_width $popover_border_color;
    }
    border-radius: $popover_radius;
    margin: $wm_gaps;
    background-color: $bg_color;
    color: $fg_color;
    padding: $padding;
}

@mixin slider($width: .4em, $color: $accent, $slider: true, $focusable: false){
    trough{
        border-radius: $button_radius;
        border: $border;
        background-color: $button_bg;
        min-height: $width;
        min-width:  $width;
        highlight, progress{
            border-radius: $popover_radius*0.8;
            background-color: $color;
            min-height: $width;
            min-width:  $width;
        }
        slider{
            @if $slider{
                background-color: $fg_color;
                border-radius: $button_radius;
                border: $border;
                min-height: $width;
                min-width:  $width;
            }
        }
    }
    &:hover trough{
        background-color: $hover;
    }
    @if $focusable {
        trough:focus{
            background-color: $hover;
            box-shadow: inset 0 0 0 $border_width $accent;
            highlight, progress{
                background-color: transparentize($color, 0.3);
            }
        }
    }
}

@mixin darkened($radii: 0){
    border-radius: $radii*0.99;
    @if $theme == 'dark' {
        box-shadow: inset 0 0 3em 1em transparentize($bg_color, 0.1);
    }
    @if $theme == 'light' {
        background-color: transparentize($bg_color, 0.5);
    }
}

@mixin tooltip{
    > * > *{
        background-color: $bg_color;
        border-radius: $button_radius;
        border: $border_width solid $popover_border_color;
        color: $fg_color;
        padding: 8px;
        margin: 4px;
        box-shadow: 0 0 3px 0 rgba(0,0,0,0.4);
    }
}

@mixin scrollbar{
    scrollbar.vertical{
        slider{
            background: $widget_bg;
            border-radius: $radii;
            min-width: .6em;
            min-height: 2em;
        }
    }
    overshoot{
        border-radius: $radii;
        &.top{
            background: linear-gradient(transparentize($bg_color, 0.6), transparent);
        }
        &.bottom{
            background: linear-gradient(transparent,transparentize($bg_color, 0.6));
        }
    }
}
