/*********

* Budgie *

*********/

$alert_color: $red;

$button_bg: transparent;

$entry_border: transparent;

$mpris_overlay_fg: $fg_color;

$mpris_overlay_bg: transparentize(if($variant=='light',$base_color, darken($bg_color, 10%)), 0.1);

$mpris_overlay_border: $top_highlight;

$panel_bg: darken($dm_dark, 2%);

$panel_color: $headerbar_fg_color;

$panel_border: transparentize(darken($headerbar_color, 7%), 0.08);

$panel_shadow: transparentize(black, 0.7);

$raven_bg: $dm_dark;

$raven_expander_border: transparentize($borders_color, 0.05);

$raven_border: transparentize($borders_color, 0.08);

$raven_expander_bg: transparentize(lighten($panel_bg, 15%), 0.5);

$raven_background_bg: transparent;

$raven_background_border: transparent;

$depth: 0 1px 1px rgba(0, 0, 0, 0.06),

0 1px 2px rgba(0, 0, 0, 0.20),

inset 0px 1px 0px 0px $top_highlight;

@function gtkalpha($c,$a) {

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

}

$roundness: 8px;

$border_width: 1px;

$pos_list: ((top, bottom),(bottom,top),(left,right),(right,left));

// Container for both the "panel" area and the shadow. Wise to keep

// this transparent..

.budgie-container {

  background-color: transparent;

  &:backdrop { background-color: transparent; }

  popover list,

  popover row {

    border: none;

    background: none;

    padding: 0;

    margin: 0;

  }

}

.budgie-popover .container,

.budgie-popover border,

.budgie-popover list,

.budgie-popover row {

    @extend %reset_style

}

%reset_style {

    padding: 0;

    margin: 0;

    background: none;

    border: none;

    box-shadow: none;

    text-shadow: none;

    -gtk-icon-shadow: none;

    opacity: 1;

    min-width: 0;

    min-height: 0;

}

.budgie-popover,

.budgie-popover.background {

    border-radius: 10px;

    padding: 0;

    background: $dm_dark;

    background-clip: border-box;

    box-shadow: 0 2px 3px 1px transparentize(black, 0.65);

    border: 1px solid $borders_color;

    list,

    row {

      &:hover { background: none; }

    }

    > frame.container {

      margin: 0 -1px -1px; // remove gap

      padding: 2px 0 0;

    }

    button {

      color: $panel_color;

      border: none;

      background: transparent;

        // @include button(normal-header);

        &:hover {

          color: $selected_bg_color;

        }

    }

}

.budgie-popover > .container {

    padding: 2px;

}

// Budgie Menu

.budgie-menu {

    color: $panel_color;

    .container { padding: 0; }

    button:hover { -gtk-icon-effect: none; }

    entry.search {

        border: none;

        background: none;

        padding: 5px 2px;

        border-bottom: 1px solid $borders_color;

        border-radius: 0;

        font-size: 120%;

        box-shadow: none;

        color:$panel_color;

        image {

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

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

        }

    }

    .categories {

        border-width: 0;

        margin-left: 3px;

        background: transparent;

        &:dir(ltr) { border-right: 1px solid $borders_color; }

        &:dir(rtl) { border-left: 1px solid $borders_color; }

    }

    .category-button {

        padding: 7px;

        border-radius: 2px 0 0 2px;

        &:hover {

          background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.85));

          color: $fg_color;

        }

        &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }

        &:checked {

          color: $selected_fg_color;

          background: $selected_bg_color;

          &:hover { 

            color: transparentize($selected_fg_color, 0.4);

          }

        }

        &:checked:disabled {

            opacity: 0.5;

            label { color: transparentize($selected_fg_color, 0.3); }

        }

    }

    scrollbar {

      background-color: transparent;

      border-color: $borders_color;

    }

    button:not(.category-button) {

      padding-top: 5px;

      padding-bottom: 5px;

      border-radius: 0;

      box-shadow: none;

      background:transparent;

      &:hover {

        @include button(hover-header, $selected_bg_color, #fff);

      }

    }

    button{

        border: none;

        background: transparent;

    }

    undershoot, overshoot { background: none; }

    list {

      color: transparentize($panel_color, 0.3);

    }

}

// Menu Button

button.budgie-menu-launcher {

    padding: 0 2px;

    color: $headerbar_fg_color;

    box-shadow: none;

    background-color: transparent;

    &:hover { color: $headerbar_fg_color; }

    &:active, &:checked { color: $headerbar_fg_color; }

    &:backdrop {

      color: $headerbar_fg_color;

      background-color: transparent;

      &:hover { color: $headerbar_fg_color; }

      &:active, &:checked {

        color: $selected_bg_color;

        box-shadow: none;

        background-color:  mix($bg_color, $base_color, 20%);

      }

    }

}

// User Menu

.user-menu {

    .content-box separator {

      margin-left: 6px;

      margin-right: 6px;

      background-color: transparentize($fg_color, 0.9);

    }

    button { margin: 5px; }

    // top-row (user-name and avatar)

    > box.vertical row.activatable:first-child,

    > frame.container > box.vertical row.activatable:first-child {

      .indicator-item {

        box-shadow: $depth;

        background-color: $selected_bg_color;

        transition-duration: 0.2s;

        &:dir(ltr) { // mask avatar's background

          padding-left: 7px; // non-scaling unit

          background-position: left center;

          background-repeat: no-repeat;

          background-size: 38px auto; // non-scaling unit

        }

        &:dir(rtl) {

          padding-right: 7px;

          background-position: right center;

          background-repeat: no-repeat;

          background-size: 38px auto;

        }

        label {

          color: $selected_fg_color;

          &:dir(ltr) { padding-left: 5px; }

          &:dir(rtl) { padding-right: 5px; }

        }

        image {

          color: $selected_fg_color;

          &:first-child { // avatar image

            min-width: 24px;

            min-height: 20px;

          }

        }

      }

    }

}

// Raven Trigger

button.raven-trigger {

    padding-left: 2px;

    padding-right: 2px;

    color: $headerbar_fg_color;

    box-shadow: none;

    &:hover {

      color: $headerbar_fg_color;

      background-color: transparent;

    }

    &:active, &:checked {

      box-shadow: none;

      background-color: transparent;

      color: $selected_bg_color;

    }

    &:backdrop {

      color: $headerbar_fg_color;

      &:hover {

        color: $headerbar_fg_color;

      }

      &:active, &:checked {

        box-shadow: none;

        color: $selected_bg_color;

        background-color: transparent;

      }

    }

}

// Places Menu

.places-menu {

    .container { 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: 0px;

        border-bottom: 1px solid $raven_expander_border;

        box-shadow: 0px 1px 1px #{"alpha(@theme_fg_color, 0.03)"};

    }

    .places-section-header > button {

        padding: 8px;

        border: none;

        border-bottom-left-radius: 0px;

        border-bottom-right-radius: 0px;

    }

    .places-list {

        background: transparentize($fg_color, 0.96);

        border-bottom: 1px solid $raven_expander_border;

    }

    .unlock-area {

        border-top: 1px solid transparentize($raven_expander_border, 0.1);

        border-bottom: 1px solid transparentize($raven_expander_border, 0.1);

    }

    .unlock-area entry {

        border-radius: 0;

        border: 0;

    }

    .unlock-area button {

        border-radius: 0;

        border: 0;

        border-left: 1px solid transparentize($raven_expander_border, 0.1);

    }

    .alternative-label {

        font-size: 15px;

        padding: 3px;

    }

    .always-expand {

        background: transparent;

        border-bottom: none;

    }

}

// Night Light indicator

.night-light-indicator {

    .container { padding: 0; }

    .view-header {

        font-size: 14px;

        padding: 10px;

        border-bottom: #{"1px solid mix(@theme_base_color, #000000, 0.35);"};

        box-shadow: #{"0px 1px 1px alpha(@theme_fg_color, 0.04);"};

    }

    .display-settings-button {

        border-top-left-radius: 0px;

        border-top-right-radius: 0px;

        border: none;

        padding: 3px;

        border-top: #{"1px solid mix(@theme_base_color, #000000, 0.35);"};

        box-shadow: #{"inset 0px 1px 1px alpha(@theme_fg_color, 0.04);"};

    }

}

// Panel

.budgie-panel {

    color: $headerbar_fg_color;

    background-color: $panel_bg;

    background-image: none;

    box-shadow: none;

    border: none;

    transition: all 150ms ease-in;

    .alert { color: $alert_color; }

    &:backdrop {

      color: $headerbar_fg_color;

      background-color: $panel_bg;

    }

    button {

      border-top-width: 0;

      border-bottom-width: 0;

      border-radius: 0;

      &.flat {

          background: transparent;

          border: none;

          &:hover, &:active, &:checked {

            background: transparentize($selected_bg_color, 0.3);

            color: lighten($fg_color, 5%);

          }

      }

    }

    popover list,

    popover row {

      padding: 0;

      margin: 0;

    }

    label {

      color: $headerbar_fg_color;

      font-weight: 700;

    }

    &.transparent {

        background-color: transparentize($panel_bg, 0.15);

        .top & {

            border-bottom-color: transparent;

        }

        .bottom & {

            border-top-color: transparent;

        }

        .left & {

            border-right-color: transparent;

        }

        .right & {

            border-left-color: transparent;

        }

        &:backdrop, label, button.raven-trigger:backdrop, button.budgie-menu-launcher {

          color: lighten($headerbar_fg_color, 10%);

        }

    }

    .end-region {

     // background-color: rgba(0,0,0,0.3);

      border-radius: 0px;

      separator { background-color: transparentize($headerbar_fg_color, 0.85); }

      label {

        font-weight: 700;

        color: $headerbar_fg_color;

      }

    }

}

// Tasklist

.budgie-panel #tasklist-button,

.budgie-panel #tasklist-button:backdrop {

    outline-color: transparent;

    transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

    border-color: transparentize($panel_bg,1); // fixes the transition

    border-radius: 0;

    background-color: transparent;

    box-shadow: none;

    background-clip: padding-box;

    @extend %underscores;

}

// Icon Tasklist

.budgie-panel {

    button.flat.launcher {

        outline-color: transparent;

        transition: all 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

        border-color: transparentize($panel_bg,1); // fixes the transition

        border-radius: 0;

        padding: 0;

        background-clip: padding-box;

        background-color: transparent;

        & { box-shadow: none; }

    }

    .unpinned button.flat.launcher,

    .pinned button.flat.launcher.running { @extend %underscores; }

}

%underscores {

    &:hover { box-shadow: none; }

    &:active, &:checked { box-shadow: none; }

    @each $pos, $b_pos in $pos_list {

        .#{$pos} & {

            padding-#{$b_pos}: 2px;

            border-#{$pos}: 2px solid transparent;

            @at-root {

                .#{$pos} .budgie-panel .pinned button.flat.launcher:not(.running) { border-#{$pos}: 2px solid transparent; }

                .#{$pos} .budgie-panel .pinned button.flat.launcher:not(.running):hover { border-#{$pos}: 2px solid transparentize(white, 0.9); }

                .#{$pos} .budgie-panel .unpinned button.flat.launcher,

                .#{$pos} .budgie-panel .pinned button.flat.launcher.running { border-#{$pos}: 2px solid transparentize(white, 0.9); }

            }

            &:hover {

                border-#{$pos}: 2px solid transparentize(white, 0.75);

            }

            &: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 {

            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 {

    padding: 0;

    color: $panel_color;

    background: $raven_bg;

    transition: 170ms ease-out;

    list {

      color: $panel_color;

      background-color: transparent;

      &:selected { background-color: transparentize($selected_bg_color,0.1); }

      row,

      row.activatable {

        background-color: transparent;

        &:hover { background-color: transparentize(lighten($panel_bg, 15%), 0.7);}

        &:selected { background-color: transparentize($selected_bg_color,0.1); }

      }

    }

    .raven-background {

        color: $panel_color;

        background-color: transparent;

        border-color: transparent;

        &.middle { border-bottom-style: none; }  // applet background between two headers

    }

    .powerstrip {

      background-color: transparent;

      border-top-color: transparent;

    }

    .powerstrip button.image-button {

      border-radius:50%;

      padding: 5px;

      min-width: 32px;

      min-height: 32px;

      margin-bottom: 3px;

      background: $purple; 

      color: $selected_fg_color;

      box-shadow: $depth;

      border: none;

      font-size: 100%;

      &:hover {

        background: transparentize($purple,0.15);

        color: $selected_fg_color;

      }

      &:active {

        background: $purple;

        color: $selected_fg_color;

      }

      &:first-child {

        background: $suggested_bg_color;

        &:hover {

          background: transparentize($selected_bg_color, 0.15);

        }

        &:active {

          background: $selected_bg_color;

        }

      }

      &:last-child {

        background: $destructive_bg_color;

        &:hover {

          background: transparentize($red, 0.15);

        }

        &:active {

          background: $red;

        }

      }

    }

    .option-subtitle {

        font-size: 13px;

    }

}

// Calendar

calendar.raven-calendar {

  padding: 4px;

  color: $panel_color;

  background: transparent;

  border-color: transparent;

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

  &:selected {

    background: transparentize($selected_bg_color, 0.4);

    color:$panel_color;

    font-weight: bold;

  }

  &:backdrop { background-color: transparent; }

  &.header {

    color: $panel_color;

    border: none;

    border-radius: 0;

    background-color: transparent;

  }

  & button, & button:focus {

    color: gtkalpha(currentColor,0.5);

    background-color: transparent;

    &:hover {

      color: $fg_color;

      background-color: transparent;

    }

  }

}

// MPRIS Applet

.raven-mpris {

    color: $mpris_overlay_fg;

    background-color: $mpris_overlay_bg;

    border: solid $mpris_overlay_border;

    border-width: 1px 0;

    border-bottom-color: $bottom_highlight;

    button.image-button {

      padding: 10px;

      background-color: $base_color;

      box-shadow: $depth;

      &:hover { background-color: $selected_bg_color; }

      &:active { background-color: darken($selected_bg_color,5%); }

      &:first-child { margin-right: 4px; }

      &:last-child { margin-left: 4px; }

      &:last-child,

      &:first-child {

        padding: 4px;

        margin-top: 6px;

        margin-bottom: 6px;

      }

    }

}

// Notifications

.budgie-notification-window {

    background: none;

    border-radius: 1px;

    button {

      background-color: $selected_bg_color;

      color: $selected_fg_color;

      border: none;

      &:hover {

        background-color: darken($selected_bg_color, 5%);

        border: none;

      }

      &:active, &:checked { background-color: darken($selected_bg_color, 5%); }

    }

}

.budgie-notification {

    &.background {

        border-radius: 1px;

    }

    .notification-title {

        font-size: 110%;

        color: $headerbar_fg_color;

    }

    .notification-body { color: transparentize($headerbar_fg_color, 0.3); }

    button {

      background-color: transparent;

      color: $selected_fg_color;

      &:hover {

        background-color: transparent;

        color: $red;

        box-shadow: none;

      }

      &:active, &:checked {

        background-color: transparent;

        color: darken($red, 5%);

      }

    }

}

.drop-shadow {

    color: $headerbar_fg_color;

    background-color: transparentize(if($variant=='light', $headerbar_color, $bg_color), 0.05);

    box-shadow: 0 1px 2px 0 transparentize(black, 0.8);

    border-radius: 2px;

}

// On Screen Display in Budgie

.budgie-osd-window {

    @extend .budgie-notification-window;

}

// Internal part of the OSD

.budgie-osd {

    @extend .budgie-notification;

}

// Alt+tab switcher in Budgie

.budgie-switcher-window {

    @extend .budgie-notification-window;

    // Flowbox

    flowbox { color: $fg_color; }

    flowboxchild {

        padding: 3px;

        margin: 3px;

        color: $fg_color;

        &:hover { background-color: $button_bg; }

        &:active { color: $fg_color; }

        &:selected {

            color: $selected_fg_color;

            background-color: transparentize($selected_bg_color,0.5);

            &:active { color: $selected_fg_color; }

            &:hover { background-color: mix(black, $selected_bg_color, 10%); }

            &:disabled {

                color: transparentize($selected_fg_color, 0.3);

                background-color: transparentize($selected_bg_color, 0.3);

                label { color: transparentize($selected_fg_color, 0.3); }

            }

        }

    }

}

// Internal part of the Switcher

.budgie-switcher {

    @extend .budgie-notification;

}

// Session Dialog

.budgie-session-dialog {

    color: $headerbar_fg_color;

    background-color: $panel_bg;

    label:backdrop { color: $backdrop_headerbar_fg_color; }

    &.background { @extend .drop-shadow; }

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

    .linked.horizontal > button {

      margin-bottom: 0;

      min-height: 32px;

      border-bottom: none;

      border-color:$borders_color;

      border-radius: 0;

      color: $headerbar_fg_color;

      background-color: transparent;

      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), inset 0 1px 2px rgba(0, 0, 0, 0.20);

      label { font-weight: 700; }

      &:first-child { border-left: none; border-bottom-left-radius: 2px; }

      &:last-child { border-right: none; border-bottom-right-radius: 2px; background:transparent;}

      &:hover {

        background-color: transparentize($selected_bg_color, 0.1);

        color: $selected_fg_color;

        &:backdrop {

          label { color: transparentize($selected_fg_color, 0.5); }

        }

      }

      @each $b_type, $b_color in (suggested-action, $selected_bg_color),

                                 (destructive-action, $destructive_color) {

        &.#{$b_type} {

          background-color: transparentize($b_color, 0.1);

          &:hover { background-color: transparentize(lighten($b_color,5%), 0.1); }

          &:active, &:checked { background-color: transparentize(lighten($b_color,5%), 0.1); }

        }

      }

    }

    entry {

      background-color: #505359;

      color: $headerbar_fg_color;

      &:focus { background-color:  #505359; }

      &:backdrop { background-color: #505359; }

    }

}

// PolKit Dialog

.budgie-polkit-dialog {

    @extend .budgie-session-dialog;

    .message { color: transparentize($headerbar_fg_color, 0.3); }

    .failure { color: $alert_color; }

}

// Run Dialog

.budgie-run-dialog {

    @extend .budgie-session-dialog;

    entry.search, entry.search:focus {

        font-size: 120%;

        padding: 8px 5px;

        border: none;

        box-shadow: none;

        image {

            color: $headerbar_fg_color;

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

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

        }

    }

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

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

}

// Budgie styled Gtk Menus

.budgie-menubar {

    menu {

      margin: 4px;

      padding: 5px;

      border-radius: 0;

      background-color: $panel_bg;

      menuitem:hover {

        background-color: $selected_bg_color;

        color: $selected_fg_color;

      }

    }

    arrow {

        border:none;

        min-width:16px;

        min-height:16px;

        &.top {

            -gtk-icon-source:-gtk-icontheme("pan-up-symbolic");

            border-bottom: 1px solid mix($fg_color, $raven_bg, 10%);

        }

        &.bottom {

            -gtk-icon-source:-gtk-icontheme("pan-down-symbolic");

            border-top: 1px solid mix($fg_color, $raven_bg, 10%);

        }

    }

    menuitem {

        accelerator {

            color: transparentize($fg_color, 0.65);

        }

        check, radio {

            min-height: 16px;

            min-width: 16px;

        }

    }

}

// settings-window

window.background.budgie-settings-window.csd {

  > box.horizontal > stack > scrolledwindow {

      // hide double-borders

      buttonbox.inline-toolbar { border-style: none none solid; }

  }

}

// main menu styling

.workspace-switcher {

  .workspace-layout {

    border: 0 solid $panel_bg;

    .top &,

    .bottom & {

      &:dir(ltr) { border-left-width: 1px; }

      &:dir(rtl) { border-right-width: 1px; }

    }

    .left &,

    .right & { border-top-width: 1px; }

  }

  .workspace-item,

  .workspace-add-button {

    border: 0 solid lighten($panel_bg, 10%);

    .top &,

    .bottom & {

      &:dir(ltr) { border-right-width: 1px; }

      &:dir(rtl) { border-left-width: 1px; }

    }

    .left &,

    .right & { border-bottom-width: 1px; }

  }

  .workspace-item {

    &.current-workspace { background-color: darken($panel_bg, 5%); }

  }

  .workspace-add-button {

    border: none;

    background: transparent;

    &:hover { box-shadow: none; }

    &:active { background-image: none; }

    &:active image { margin: 1px 0 -1px; }

  }

  .workspace-icon-button {

    .budgie-panel & { // to overwrite the .budgie-panel button style below

      min-height: 24px;

      min-width: 24px;

      padding: 0;

      border-radius: 2px;

    }

  }

}