// based css:
// https://github.com/budgie-desktop/budgie-desktop/tree/master/src/theme

/******************
 * Budgie Desktop *
 ******************/

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

// Budgie Menu
.budgie-menu {
  &.background {
    padding: 0;
    background-color: $base_color;
  }

  scrolledwindow,
  list,
  row,
  scrollbar { // reset styling
    min-width: 0;
    min-height: 0;
    border: none;
    background: none;
    box-shadow: none;
  }

  scrollbar,
  entry.search { background-color: transparent; }

  entry.search {
    border-bottom: 1px solid $border_color;
    border-radius: 0;
    box-shadow: none;
    font-size: 120%;
  }

  .categories {
    &:dir(ltr) { border-bottom-left-radius: $material_radius; }

    &:dir(rtl) { border-bottom-right-radius: $material_radius; }
  }

  button {
    @extend %row_activatable;

    min-height: 32px;
    padding: 0 8px;
    border-radius: 0;
    color: $fg_color;
    font-weight: normal;

    &:disabled { color: $disabled_fg_color; }

    &:checked { @extend %selected_items; }

    &:checked:disabled { background-color: $primary_color; } // overriding
  }

  row {
    padding: 0;

    &:hover { box-shadow: none; }
  }
}

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

// Raven Trigger
button.raven-trigger {
  padding: 0 4px;
  color: $inverse_fg_color;
}

// budgie specific popover widgets
.budgie-popover {
  border-style: none;
  border-width: 1px;
  border-color: $border-color;
  border-radius: 1px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.28);
  background-color: $bg_color;

  .container { padding: 2px; }

  border { border: none; }


  // User Menu
  & user-menu {
    padding: 8px;

    .content-box { background-color: transparent; }

    separator { margin: 4px 0; }

    row {
      padding: 0;
      box-shadow: none;
      background-image: none;
    }
  }

  // Places Menu
  & places-menu {
    padding: 0px;

    .message-bar {
      // margin-bottom: 4px;
    }

    .name-button.text-button {
      // padding: 4px 8px;
      padding-left: 8px;
      padding-right: 8px;

      image {
        &:dir(ltr) { margin-right: 8px - 5px; }
        &:dir(rtl) { margin-left: 8px - 5px; }
      }
    }

    .unmount-button {
      // padding: ($medium_size - 24px) / 2;
    }

    .places-section-header > image {
      &:dir(ltr) { margin: 0 8px - 10px 0 8px - 3px; }
      &:dir(rtl) { margin: 0 8px - 3px 0 8px - 10px; }
    }

    .places-list {
      margin-top: 0px;
      padding-top: 0px;
      border-top: 1px solid $border_color;
      background-color: transparent;
    }

    row {
      padding: 0;
      box-shadow: none;
      background-image: none;
    }

    .unlock-area {
      entry {
      }

      button {
      }
    }
  }
}

// Panel
.budgie-panel {
  background-color: if($variant == 'light',
                                   $brown_700,
                                   lighten($brown_800, 5%));
  color: $inverse_fg_color;
  font-weight: 500;

  button {
    border-radius: 0;
    color: $inverse_fg_color;
    @extend %button_selected_flat;
  }

  & .horizontal.pixelsaver { //budgie-pixel-saver applet
          background-color: transparent;
          border: none;
          min-height: 0px;
          color: $inverse_fg_color;
          box-shadow: none;
          padding: $bar_size;

          & .close {
            @extend %circular_button;
            padding: $mini_padding * 2;
            min-width: $close_button_size;
            min-height: $close_button_size;

            background-image: image(mix($destructive_color, $accent_color, 50%));
            .selection-mode & {
            }
          }

          & .image-button {
            @extend %circular_button;
            padding: $mini_padding * 2;
            min-width: $close_button_size;
            min-height: $close_button_size;
            .selection-mode & {
            }
          }
      }

  // transparent-mode
  &.transparent {
    background-color: $alt_panel_bg_color;
  }

  separator { background-color: $inverse_track_color; }

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

  // End Section needs to be fancy
  .end-region {
      background-color: rgba(0,0,0,0.3);
      border-radius: 0px;
      //separator { background-color: transparentize($selected_fg_color, 0.85); }
      label {
        font-weight: 700;
        //color: $selected_fg_color;
      }
  }

  // Tasklist
  #tasklist-button {
    padding: 0 4px;

    @extend %flat_button;

    @extend %button_selected_flat;

    @extend %underscores;

    &:checked { background-color: $inverse_divider_color; }
  }

  // Icon Tasklist
  button.flat.launcher {
    padding: 0;

    @extend %underscores;

    &:checked { background-color: $inverse_divider_color; }

    &:not(:checked) {
      color: $inverse_hint_fg_color;

      &:hover, &:active { color: $inverse_secondary_fg_color; }

      &:disabled { color: $inverse_track_color; }
    }
  }

  .unpinned button.flat.launcher,
  .pinned button.flat.launcher.running { @extend %underscores_checked; }

  menubar { // remove underline of menubar on panel
    border: none;
    box-shadow: none;

    > menuitem {
      color: $inverse_fg_color;

      &.budgie-menubar {
        border: none;
        &:hover { background-color: rgba($fg_color, 0.10); }
      }
    }
  }
}

@each $along_side, $opp_side in (top, bottom),
                                (bottom, top),
                                (left, right),
                                (right, left) {
  // panel shadow styling
  .#{$along_side} .shadow-block {
    background-color: transparent;
    background-image: linear-gradient(to #{$opp_side},
                                      gtkopacity(#000000, 0.23),
                                      gtkopacity(#000000, 0.08),
                                      transparent);
  }
}


%underscores {
  @each $pos, $b_pos, $b_wid in (top,    center calc(1px),        2 0 0 0 / 2px 0 0 0),
                                (bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
                                (left,   calc(1px) center,        0 0 0 2 / 0 0 0 2px),
                                (right,  calc(100% - 1px) center, 0 2 0 0 / 0 2px 0 0) {
    .#{$pos} & {
      & {
        border-image: radial-gradient(circle closest-corner at #{$b_pos},
                                      currentColor 0%,
                                      transparent 0%)
                                      0 0 0 0 / 0 0 0 0;
      }

      @at-root %underscores_checked,
      &:checked {
        border-image: radial-gradient(circle closest-corner at #{$b_pos},
                                      currentColor 100%,
                                      transparent 0%)
                                      #{$b_wid};
      }
    }
  }
}


frame.raven-frame > border {
  border-style: none;
  box-shadow: $shadow_4;
}

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

@each $pos, $b_pos in $pos_list {
  // Panel borders
  // .#{$pos} .budgie-panel { border-#{$b_pos}: 1px solid $border_color; }

  // Raven borders
  .#{$pos} frame.raven-frame > border {
    margin-#{$b_pos}: 2px;
    // border-#{$b_pos}: 1px solid $border_color;
  }

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

// Raven

$raven_box_spacing: 4px;
$switcher_width: 127px;
$widget_size: 37.3px;
$ref_weight: 0.7;
$switcher_height: $widget_size - if($ref_weight < 1.0, 10.7px, 5.3px);


%raven_switcher_radio_button {
  min-height: 27px;
  padding-top: 0;
  padding-bottom: 0;
  outline-style: none; // unset outlines
  background-color: $primary_color;
  color: $inverse_fg_color;

  &:not(:hover):not(:active):not(:checked) {
    color: $inverse_secondary_fg_color;
  }
  // show underlines for :checked only
  &:not(:checked) { border-image: none; }
}

.raven {
  background-color: $lighter_bg_color;

  > stack { margin-bottom: -10px; }

  // > stack > box:last-child > stack { margin-top: -6px; }

  stackswitcher.linked > button {
    @extend %flat_button;

    @extend %button_selected_flat;

    border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                  $primary_color 0%,
                                  transparent 0%)
                                  0 0 0 / 0 0 0px;
    border-radius: 0;

    &:checked {
      border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                    $primary_color 100%,
                                    transparent 0%)
                                    0 0 2 / 0 0 2px;
      background-color: transparent;
    }
  }

  .raven-header {
    min-height: $large_size;
    padding: $mini_padding;

    &:not(.top) {
      margin-top: -$tiny_padding; // remove extra spaces, but not perfect :(

      button {
        @extend %simple_flat_button;

        &.image-button { @extend %circular_button; }
      }
    }

    &.top {
      padding: 0;
      background-color: $primary_color;
      border-bottom: 1px solid $border_color;

      stackswitcher button {
        margin: -4px 0 -5px;
        padding: 0 16px;
        min-height: $large_size;
      }

      button.image-button {
        &:dir(ltr) { margin-right: $mini_padding; }
        &:dir(rtl) { margin-left: $mini_padding; }
      }

      > image { margin: 0 $small_padding; }

      > label {
        margin: 0 -$small_padding;
        font-weight: bold;
      }
    }

    &.bottom { border-top: $border_size solid $border_color; }
  }

  stack {
    .raven-header { margin-top: -$small_padding; }
    scrolledwindow .raven-header { margin-top: -$small_padding; } // remove extra spaces in Applets
  }

  .expander-button { @extend %circular_button; }

  .raven-background {
    border-style: solid none;
    border-width: $border_size;
    border-color: $border_color;
    background-color: $base_color;

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

    &.frame { border-style: solid none; }

    > overlay > widget > image { color: $divider_color; }

    grid > label:first-child { min-height: $large_size; } // workaround to fix vertical-align

    spinbutton:not(.vertical) { @extend %entry_flat; }

    button.combo { @extend %combo_flat; }
  }

  scrolledwindow.raven-background { border-bottom-style: none; }

  .raven-header.top + .raven-background {
    border-style: none;
    background-color: $primary_color;
    color: $inverse_fg_color;

    stackswitcher button { margin: -$tiny_padding 0; }
  }

  list { // apps/devices list
    &.apps-list,
    &.sound-devices {
      margin: 0 1px; // stop touching the parent L/R edges
    }
  }

  .powerstrip button {
    margin: $mini_padding 0 $no_padding;
    padding: $standard_padding;
  }

  .option-subtitle { font-size: smaller; }

  // audio app/device switcher
  box.audio-widget stackswitcher.linked {
    padding: 0 $raven_box_spacing; // limit child horizontal spacing

    > button.text-button.radio {
      @extend %raven_switcher_radio_button;
    }
  }
  widget.raven-background stack > box > revealer > box.vertical > label {
    .dim-label { opacity: .54; }
    font-size: 90%;
  }

}

box.audio-widget,
window.sound-popover.background {
  scale.horizontal.marks-after { // overdrive-mode scale
    padding-top: 0; // unset default padding
    padding-bottom: 0;

    trough { // overdrive-mode trough styling
      background-color: transparent; // unset default trough color
      @each $_dir, $_opp_end in (ltr, right),
                                (rtl, left) {
        &:dir(#{$_dir}) {
          background-image:
            linear-gradient(to $_opp_end,
                            $hint_fg_color  calc(66% - 1px),
                            $secondary_fg_color calc(66% - 1px),
                            $secondary_fg_color 100%);
        }
      }
    }

    mark {
      // hide label for vertically centered troughs
      label { font-size: 0; }
    }
  }
}

// Calendar
calendar.raven-calendar {
  // padding: 3px;
  border-style: none;
  background-color: transparent;

  &:selected {
    border-radius: $pocillo_radius;
    background-color: $primary_color;
  }
}

// MPRIS Applet
.raven-mpris {
  background-color: rgba($black, $middle_opacity);
  color: $inverse_fg_color;

  label { min-height: $medium_size; }

  button.image-button {
    padding: $standard_padding;

    @extend %button_selected_flat;
  }
}

// Notifications
.budgie-notification-window {
  background-color: transparent;

  border-radius: 2px;
  color: $inverse_fg_color;

  button {
      color: $inverse_fg_color;
      @extend %button_selected_flat;
  }

  > box {
    background-color: if($variant == 'light',
								   $brown_700,
								   lighten($brown_800, 5%));
	color: $inverse_fg_color;
	box-shadow: 0 3px 4px rgba(0, 0, 0, 0.28);
    > grid {
      background-color: if($variant == 'light',
								   $brown_700,
								   lighten($brown_800, 5%));
	  color: $inverse_fg_color;

      }
   }
 }

.budgie-notification {
  .notification-title {
	  font-size: 120%;
  }

  .notification-body {
    @extend .dim-label;
  }
}

// notification list
box.vertical > stack > box.vertical {

  > .raven-background > viewport.frame {
    padding: 0; // reset padding for full-width list node

    list { background-color: transparent; }

    > list > row.activatable {
      margin-left: -8px;
      margin-right: -2px;
      background-color: transparent;

      > grid > *, // legacy
      > box.vertical * { color: $fg_color; }

      image { padding-left: 8px; }

      button.image-button { // 'dismiss'
        min-height: 32px;
        min-width: 32px;
        margin: 8px;
        image { padding: 0; }

        &:hover { @include button(header-hover); }
        &:active, &:checked { @include button(header-active); image { color: white; } }
      }

      // sub-list rows grouping
      list {
        border-radius: 2px;
        border-top: 1px solid $border_color;
        border-bottom: 1px solid $border_color;

        > row.activatable {
          border-bottom: 1px solid $border_color;
          &:last-child { border-bottom: none; }

          &:selected {
            background-color: rgba($fg_color, 0.06);
          }

          label { padding: 0 16px; }

          button.image-button { // 'close'
            min-height: 24px;
            min-width: 24px;
            image { padding: 0; }
          }

          // box.horizontal > label:first-child { font-weight: 500; } // title labels
        }
      }

      &:selected {
        background-color: rgba($bg_color, 0.75);
        // &:dir(ltr) { box-shadow: inset 2px 0 $selected_bg_color; }
        // &:dir(rtl) { box-shadow: inset -2px 0 $selected_bg_color; }

        > grid > *,
        > box.vertical * { color: $fg_color; }

        button.image-button { // 'dismiss'
          border: none;

          &:hover { background-color: rgba(white, 0.25); }
          &:active, &:checked { background-color: rgba(white, 0.35); }
        }

        list {
          border: 1px solid rgba(white, 0.12);

          > row.activatable {
            border-bottom: 1px solid rgba(white, 0.12);
            &:last-child { border-bottom: none; }

            &:selected {
              background-color: rgba($bg_color, 0.65);
            }
          }
        }
      }
    }
  }
}


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

// Internal part of the OSD
.budgie-osd {
  .budgie-osd-text { font-size: 120%; }
}

// Alt+tab switcher in Budgie
.budgie-switcher-window {
  @extend .budgie-notification-window;
}

// Internal part of the Switcher
.budgie-switcher {
  @extend .budgie-notification;
}

.drop-shadow {
  margin: 5px 9px;
  padding: 3px;
  border-radius: 2px;
  box-shadow: $shadow_2, inset 0 1px $highlight_color;
  background-color: $lighter_bg_color;

  button { @extend %simple_flat_button; }

  .linked > button { border-radius: 2px; }
}

%budgie_dialog {
  border-radius: 2px;
  background-color: $lighter_bg_color;

  decoration { border-radius: 2px; }
}

// Session Dialog
.budgie-session-dialog {
  @extend %budgie_dialog;

  label:not(:last-child),
  .dialog-title { font-size: 120%; }

  .linked.horizontal > button {
    padding: 8px 16px;
    border-top: 1px solid $border_color;
    border-radius: 0;

    @extend %simple_flat_button;

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

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

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

  .message { color: $hint_fg_color; }

  .failure { color: $destructive_color; }
}

// Run Dialog
.budgie-run-dialog {
  @extend %budgie_dialog;

  background-color: $base_color;

  entry.search {
    font-size: 120%;
    padding: $container_padding 8px + $container_padding;
    box-shadow: inset 0 1px $highlight_color;
    background-color: transparent;
  }

  list .dim-label { opacity: 1; }

  scrolledwindow { border-top: 1px solid $border_color; }
}

// workspace-switcher applet
widget > box.workspace-switcher {
  // main container
  > box.workspace-layout {
    widget.workspace-item {
      background-image: image(gtkopacity($inverse_fg_color, 0.4));
      background-repeat: no-repeat;
      transition-duration: 0s; // for underline-indicators

      &.current-workspace { background-image: image($secondary_fg_color); }

      @each $position, $_size in (top, calc(100% - 4px) 2px),
                                 (bottom, calc(100% - 4px) 2px),
                                 (left, 2px calc(100% - 4px)),
                                 (right, 2px calc(100% - 4px)) {
        .#{$position} & {
          background-position: #{$position} center;
          background-size: #{$_size};
        }
      }

      button.workspace-icon-button {
        min-width: 24px;
        min-height: 24px;
        padding: 4px;
        border-radius: 2px;

        > image { opacity: 0.54; }

        &:hover,
        &:active {
          -gtk-icon-effect: highlight;

          > image { opacity: 0.87; }
        }
      }

      // counter
      label.workspace-more-label {
        font-weight: 700;
        opacity: 0.54;
      }

      &.current-workspace {
        button.workspace-icon-button {
          > image { opacity: 1.0; }

          &:hover,
          &:active { -gtk-icon-effect: highlight; }
        }

        label.workspace-more-label { opacity: 1.0; }
      }
    }
  }

  // 'plus' button
  button.image-button.workspace-add-button { // expanded?
    @extend %button_basic;
    min-width: 24px;
    min-height: 24px;
    padding: 4px;
    border-radius: 0;
    color: $inverse_fg_color;
    background-color: transparent;
    &:hover {
      background-color: transparent;
      color: $inverse_fg_color;
    }
    &:active {
      background-color: transparent;
      color: $inverse_fg_color;
    }
    &:disabled { @include button(flat-insensitive); }
  }
}
