@function gtkalpha($c,$a) {
    @return unquote("alpha(#{$c},#{$a})");
}

$roundness: 3px;
$border_width: if($variant == 'default', 1px, 2px);
$pos_list: ((top, bottom),(bottom,top),(left,right),(right,left));
$asset_suffix: if($variant == 'default', '', '-hc');

// Used to reset all style properties set by the gtk theme
%reset_style,
GtkPopover GtkListBox,
GtkPopover GtkListBoxRow {
    background: none;
    border: none;
    box-shadow: none;
    text-shadow: none;
    icon-shadow: none;
    opacity: 1;
}

// Container for both the "panel" area and the shadow. Wise to keep
// this transparent..
.budgie-container { background-color: transparent; }

%widgets {

    * {
        padding: 0;
        outline-color: transparentize($fg_color, 0.7);
        outline-style: dashed;
        outline-offset: -3px;
        outline-width: 1px;
        outline-radius: 2px;

        @extend %reset_style;
    }

    .dim-label { opacity: 0.55; }
    .label:insensitive { color: transparentize($fg_color, 0.65); }
    .separator { color: rgba(0,0,0,0.25); }
    .cell { color: $fg_color; }
    GtkLabel, GtkImage { color: inherit; }

    // used to indicate unread notifications
    .alert { color: $alert_color; }

    // Entries
    .entry {
        padding: 4px 8px;
        border: $border_width solid;
        border-radius: $roundness;

        @include entry(normal);

        &:focus {
            @include entry(focus);
        }
        &:insensitive {
            @include entry(insensitive);
        }
        &:selected,
        &:selected:focus {
            color: $selected_fg_color;
            background-color: $selected_bg_color;
        }
    }

    // Buttons
    .button {
        background-clip: padding-box;
        padding: 4px 8px;
        border: $border_width solid;
        border-radius: $roundness;

        @include button(normal);

        &.flat:not(:hover):not(:active):not(:checked) {
            &, &:insensitive {
                @include button(flat);
            }
        }
        &:hover { @include button(hover); }
        &:active, &:checked { @include button(active); }
        &:insensitive {
            @include button(insensitive);
            &:active, &:checked {
                @include button(insensitive-active);
            }
        }

        // Destructive and Sugggested action buttons
        @each $b_type, $b_color in (suggested-action, $suggested_color),
                                   (destructive-action, $destructive_color) {
            &.#{$b_type} {
                @include button(normal, $b_color, $selected_fg_color);
                &:hover { @include button(hover, $b_color, $selected_fg_color); }
                &:active, &:checked { @include button(active, $active_bg:darken($b_color, 10%)); }
                &:insensitive { opacity: 0.5; }
            }
        }

        &.text-button { padding: 4px 12px; }
        &.image-button { padding: 4px; }
    }

    // Linked Widgets
    .linked {
        > .entry,
        > .button { @extend %linked; }

        // linked square buttons look weird
        .button.image-button { padding: 4px 7px; }
    }

    %linked_middle {
        border-radius: 0;
        border-right-style: none;
    }
    %linked {
        @extend %linked_middle;
        &:first-child {
            border-top-left-radius: $roundness;
            border-bottom-left-radius: $roundness;
        }
        &:last-child {
            border-top-right-radius: $roundness;
            border-bottom-right-radius: $roundness;
            border-right-style: solid;
        }
        &:only-child {
            border-radius: $roundness;
            border-style: solid;
        }
    }

    // ComboBoxes
    GtkComboBox.combobox-entry {
        .entry {
            &:dir(ltr) {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }
            &:dir(rtl) {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }
        .button {
            &:dir(ltr) {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
                border-left-style: none;
            }
            &:dir(rtl) {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
                border-right-style: none;
            }
        }
    }

    // Spinbuttons
    .spinbutton {
        border-radius: $roundness;

        .button {
            border-color: transparentize($button_border, 0.3);
            border-style: none none none solid;
            border-radius: 0;

            &:dir(rtl) { border-style: none solid none none; }
        }
    }

    // Progressbars
    GtkProgressBar {
        padding: 0;
        font-size: smaller;
        color: transparentize($fg_color, 0.3);

        &.progressbar {
            background-color: $selected_bg_color;
            border: none;
            border-radius: 3px;
        }
        &.trough {
            border: none;
            border-radius: 3px;
            background-color: $trough_bg;
        }
    }

    // Scale
    .scale {
        -GtkScale-slider-length: 16;
        -GtkRange-slider-width: 16;
        -GtkRange-trough-border: 0;
        outline-offset: -1px;
        outline-radius: 2px;
        outline-color: transparentize($fg_color, 0.7);

        color: gtkalpha(currentColor, 0.7);

        &:insensitive { opacity: 0.4; }

        &.slider {
            border-radius: 50%;

            @if $variant == 'default' {
                background-image: -gtk-scaled(url("../assets/scale-slider.png"),url("../assets/scale-slider@2.png"));
            }
            @else {
                background-color: $selected_bg_color;
            }

            &:hover { background: $selected_bg_color; }
        }
        &.trough {
            margin: 5px;
            background-color: $trough_bg;
            border-radius: 2.5px;

            &.highlight { background-color: $selected_bg_color; }
        }
    }

    // Check and Radio Items
    @each $w,$a in ('check', 'checkbox'),
                   ('radio','radio') {
      .#{$w} {
        color: $fg_color;
        -gtk-icon-source: if($variant == 'default', -gtk-scaled(url("../assets/#{$a}.png"),url("../assets/#{$a}@2.png")),
                                                    -gtk-icontheme('#{$a}-symbolic'));

        &:checked, &:active {
            -gtk-icon-source: if($variant == 'default', -gtk-scaled(url("../assets/#{$a}-active.png"),url("../assets/#{$a}-active@2.png")),
                                                        -gtk-icontheme('#{$a}-checked-symbolic'));
        }
        &:insensitive { color: transparentize($fg_color, 0.65); }
        &:inconsistent { -gtk-icon-source: -gtk-icontheme('#{$a}-mixed-symbolic'); }
      }
    }

    // Switches
    GtkSwitch {
        font: 1;
        -GtkSwitch-slider-width: 45;
        -GtkSwitch-slider-height: 19;
        outline-color: transparent;

        &:insensitive { opacity: 0.4; }

        &.trough, &.slider {
            color: transparent;
            background-size: 45px 19px;
            background-repeat: no-repeat;
            background-position: right center;

            &:dir(rtl) { background-position: left center; }
        }
        &.trough {
            background-image: -gtk-scaled(url("../assets/switch#{$asset_suffix}.png"),url("../assets/switch#{$asset_suffix}@2.png"));

            &:active { background-image: -gtk-scaled(url("../assets/switch-active#{$asset_suffix}.png"),url("../assets/switch-active#{$asset_suffix}@2.png")); }
        }
    }

    // Scrollbars
    .scrollbar {
        -GtkRange-slider-width: 13;
        -GtkRange-trough-border: 0;
        -GtkScrollbar-has-backward-stepper: false;
        -GtkScrollbar-has-forward-stepper: false;
        -GtkScrollbar-min-slider-length: 42;
        -GtkRange-stepper-spacing: 0;
        -GtkRange-trough-under-steppers: 1;

        $_slider_margin: 3px;
        $_slider_fine_tune_margin: 4px;

        .button { border: none; }

        &.overlay-indicator {
            &:not(.dragging):not(.hovering) {
                opacity: if($variant == 'default', 0.4, 1);

                -GtkRange-slider-width: 6px;

                .slider {
                    margin: $_slider_margin - 1px 0;
                    background-color: $scrollbar_bg;
                    border: 1px solid $scrollbar_border;
                    background-clip: padding-box;
                }
                .trough {
                    border-style: none;
                    background-color: transparent;
                }
            }
            &.dragging,
            &.hovering { opacity: 0.99; }
        }

        .slider {
            border-radius: 100px;
            margin: $_slider_margin;
            background-color: transparentize($scrollbar_bg, if($variant == 'default', 0.5, 0));

            &:hover { background-color: transparentize($scrollbar_bg, if($variant == 'default', 0.3, 0)); }

            &:prelight:active { background-color: $selected_bg_color;}

            &:insensitive { background-color: transparent; }
        }
        &.fine-tune .slider { margin: $_slider_fine_tune_margin; }

        .trough { background-color: if($variant == 'default', transparentize(black, 0.6), $trough_bg); }
    }

    // Lists
    .list { color: $fg_color; }
    .list-row.activatable {
        padding: 3px;
        color: $fg_color;

        &:hover { background-color: $button_bg; }
        &:active { color: $fg_color; }
        &:selected {
            color: $selected_fg_color;
            background-color: $selected_bg_color;

            &:active { color: $selected_fg_color; }
            &:hover { background-color: mix(black, $selected_bg_color, 10%); }
            &:insensitive {
                color: transparentize($selected_fg_color, 0.3);
                background-color: transparentize($selected_bg_color, 0.3);
                .label { color: inherit; }
            }
        }
    }
    @at-root %menu {
        .menu {
            .cell { color: inherit; }

            margin: 4px;
            padding: 0;
            border-radius: 0;
            background-color: $raven_bg;

            .menuitem {
                padding: 5px;
                color: $fg_color;
                &:hover {
                    color: $selected_fg_color;
                    background-color: $selected_bg_color;
              }
              &:insensitive { color: transparentize($fg_color, 0.65); }
              &.separator { color: transparentize($raven_bg, 1); }
            }
            &.button {
                border: none;
                &:hover { background-color: $selected_bg_color; }
                &:insensitive {
                    color: transparentize($fg_color, 0.65);
                    background-color: transparent;
                }
            }
        }
        .window-frame.csd.popup {
            box-shadow: 0 3px 6px transparentize(black, 0.55),
                        0 0 0 1px transparentize(black, 0.55);
        }
    }

    // Calendar
    GtkCalendar.raven-calendar {
        padding: 3px;
        color: $fg_color;

        &:inconsistent { color: gtkalpha(currentColor,0.3); }

        @if $variant=='default' {
            &:selected { color: $selected_bg_color; }
        }
        @else {
            &:selected {
                color: $selected_fg_color;
                background-color: $selected_bg_color;
            }
        }
        &.header {
            color: $fg_color;
            border: none;
            border-radius: 0;
        }
        &.button, &.button:focus {
            color: gtkalpha(currentColor,0.5);
            background-color: transparent;

            &:hover {
                color: $fg_color;
                background-color: transparent;
            }
        }
    }
}

// Budgie Menu
.budgie-menu {
    padding: 0;

    .button:hover { -gtk-image-effect: none; }

    GtkSearchEntry.entry:not(:selected) {
        @extend %reset_style;

        padding: 8px 5px;
        border-bottom: 1px solid #{"@borders"};
        border-radius: 0;
        font-size: 120%;

        &.image {
            color: currentColor;

            &:dir(ltr) { padding-left: 8px; padding-right: 12px; }
            &:dir(rtl) { padding-left: 12px; padding-right: 8px; }
        }
    }

    .categories {
        border-width: 0;

        &:dir(ltr) { border-right: 1px solid #{"@borders"}; }
        &:dir(rtl) { border-left: 1px solid #{"@borders"}; }
    }

    .category-button {
        @extend %reset_style;

        padding: 8px;
        border-radius: 0;

        &:hover { background-color: #{"mix(@theme_base_color, @theme_fg_color, 0.1);"} }
        &:active, &:checked {
            color: $selected_fg_color;
            background-color: $selected_bg_color;
        }
        &:checked:insensitive {
            opacity: 0.5;

            GtkLabel { color: inherit; }
        }
    }

    .undershoot, .overshoot { background: none; }
}

// Menu Button
.budgie-menu-launcher.button {
    padding: 0 2px;
}

// User Menu
.user-menu {
    padding: 10px;

    .content-box GtkSeparator {
        color: #{"alpha(@theme_fg_color, 0.15)"};
    }
}

// Places Menu
.places-menu {
    padding: 0;

    .message-bar {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

    .name-button {
        border: 0;
        border-radius: 0;
        padding: 4px 6px;
    }

    .unmount-button {
        padding: 4px 4px;
        border: 0;
        border-radius: 0;
    }

    .places-section-header {
        padding: 5px;
        border-bottom: 1px solid $raven_expander_border;
    }

    .places-list {
        background: transparentize($fg_color, 0.96);
        border-bottom: 1px solid $raven_expander_border;
    }

    GtkListBox,
    GtkListBoxRow {
        padding: 0;
        margin: 0;
    }
}

// Raven Trigger
.raven-trigger.button {
    padding-left: 2px;
    padding-right: 2px;
}

// Panel
.budgie-panel {
    @extend %widgets;
    color: $fg_color;
    background-color: $panel_bg;
    background-image: none;
    box-shadow: none;
    border: none;

    .button {
      border-top-width: 0;
      border-bottom-width: 0;
      border-radius: 0;
      padding-top: 0;
      padding-bottom: 0;

      .top & {
          padding-top: 1px;
          border-bottom: 1px solid transparentize($panel_bg, 1);
      }
      .bottom & {
          padding-bottom: 1px;
          border-top: 1px solid transparentize($panel_bg, 1);
      }
    }

    .separator { color: transparentize($fg_color, 0.85) }

    // End Section needs to be fancy
    @if $variant == 'default' {
        .end-region {
            background-color: rgba(0,0,0,0.2);

            &:dir(ltr) { border-left: 1px solid rgba(0,0,0,0.2); }
            &:dir(rtl) { border-right: 1px solid rgba(0,0,0,0.2); }
        }
    }
}

// Tasklist
.budgie-panel WnckTasklist .button,
.budgie-panel WnckTasklist .button:backdrop {

    border-radius: 0;

    @if $variant == 'default' {
        &:not(:hover):not(:active):not(:checked) { color: gtkalpha(currentColor, 0.5); }
        background: none;
        background-clip: padding-box;
        border: none;

        @extend %underscores;
    }
}

// Icon Tasklist
.budgie-panel {

    .launcher {
        transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
        border-color: transparentize($panel_bg,1); // fixes the transition
        padding: 0;
        background-clip: padding-box;
    }
    .unpinned .launcher,
    .pinned .launcher.running { @extend %underscores; }

    .pinned .launcher:not(.running):hover {
        background-color: transparentize(black, 0.8);
        box-shadow: inset 1px 0 transparentize(black, 0.8),
                    inset -1px 0 transparentize(black, 0.8);
    }
}

%underscores {
    &:hover,
    &:active, &:checked {
        background-color: transparentize(black, 0.8);
        box-shadow: inset 1px 0 transparentize(black, 0.8),
                    inset -1px 0 transparentize(black, 0.8);
    }

    @each $pos, $b_pos in $pos_list {
        .#{$pos} & {
            padding-#{$b_pos}: 2px;
            border-#{$pos}: 2px solid transparentize($panel_bg,1);

            @at-root {
                .#{$pos} .budgie-panel .unpinned .launcher,
                .#{$pos} .budgie-panel .pinned .launcher.running { border-#{$pos}: 2px solid transparentize($selected_bg_color, 0.5); }
            }
            &:hover {
                border-#{$pos}: 2px solid transparentize($selected_bg_color, 0.5);
            }
            &:active, &:checked {
                border-#{$pos}: 2px solid $selected_bg_color;
            }
        }
    }
}

@each $pos, $b_pos in $pos_list {

    // Panel borders
    .#{$pos} .budgie-panel { border-#{$b_pos}: $border_width solid $panel_border; }

    // Raven borders
    .#{$pos} .raven-frame {
        padding: 0;
        background: none;
        border: none;
        border-#{$b_pos}: $border_width solid $raven_border;
    }

    // Shadows
    .#{$pos} .shadow-block {
        background-color: transparent;
        background-image: linear-gradient(to $b_pos,
                                          $panel_shadow,
                                          transparent);
    }
}

// Raven
.raven {
    @extend %widgets;
    @extend %menu;
    color: $fg_color;
    background-color: $raven_bg;
    transition: 170ms ease-out;

    .raven-header {
        color: $fg_color;
        border: solid $raven_expander_border;
        border-width: 1px 0;
        background-color: $raven_expander_bg;

        &.top { border-top-style: none; }
        &.bottom { border-bottom-style: none; }
    }
    @if $variant=='default' {
        .expander-button { color: gtkalpha(currentColor, 0.5); }
    }
    .raven-background {
        color: $fg_color;
        background-color: $raven_background_bg;
        border-bottom: 1px solid $raven_background_border;

        &.middle { border-bottom-style: none; }  // applet background between two headers
    }
    .powerstrip .button {
        padding: 10px;
    }
    .option-subtitle {
        font-size: smaller;
    }
}

// MPRIS Applet
.raven-mpris {
    color: $mpris_overlay_fg;
    background-color: $mpris_overlay_bg;
    border: solid $mpris_overlay_border;
    border-width: 1px 0;

    .button.image-button { padding: 8px; }
}

// Notifications
.budgie-notification-window {
    background: none;
    border-radius: 1px;
}

.budgie-notification {
    &.background {
        border-radius: 1px;
    }
    .notification-title {
        font-size: 110%;
        color: $fg_color;
    }
    .notification-body { color: transparentize($fg_color, 0.3); }
}

// On Screen Display in Budgie
.budgie-osd-window {
    @extend .budgie-notification-window;
}

// Internal part of the OSD
.budgie-osd {
    @extend .budgie-notification;
}

.drop-shadow {
    @extend %widgets;

    color: $fg_color;
    background-color: $panel_bg;
    box-shadow: 0 2px 4px 0 $panel_shadow, 0 0 0 1px $panel_border;
    border-radius: 1px;
}

// Session Dialog
.budgie-session-dialog {
    &.background { @extend .drop-shadow; }

    .dialog-title { font-size: 120%; }

    .linked.horizontal > .button {
        border-bottom: none;
        border-radius: 0;
        padding: 8px;
        &:first-child { border-left: none; border-radius: 0; }
        &:last-child { border-right: none; border-radius: 0; }
    }
}

// PolKit Dialog
.budgie-polkit-dialog {
    @extend .budgie-session-dialog;
    @extend %menu;

    .message { color: transparentize($fg_color, 0.3); }
    .failure { color: $alert_color; }
}

// Run Dialog
.budgie-run-dialog.background {
    @extend .drop-shadow;

    GtkSearchEntry.entry,
    GtkSearchEntry.entry:focus {
        font-size: 120%;
        padding: 8px 5px;
        border: none;
        box-shadow: none;

        &.image {
            color: currentColor;

            &:dir(ltr) { padding-left: 8px; padding-right: 12px; }
            &:dir(rtl) { padding-left: 12px; padding-right: 8px; }
        }
    }

    .list .list-row:selected .dim-label { opacity: 1; }

    GtkScrolledWindow { border-top: 1px solid darken($entry_border, 5%); }

    .undershoot, .overshoot { border: none; }
}
