
//
// Budgie Desktop
//

%budgie_button_transition {
  transition: $button_transition;
  &:hover { transition: $button_transition; transition-duration: 250ms; }
  &:checked, &:active { transition: $button_transition; }
}

%budgie_panel_button_flat {
  color: $panel_fg;
  background: none;

  &:hover {
    color: $selected_fg_color;
    background-color: rgba(white, 0.15);
  }

  &:disabled {
    color: rgba($panel_fg, 0.5);
    background: none;
  }

  &:active {
    background-color: rgba(white, 0.3);
    color: $selected_fg_color;
  }

  &:checked {
    background-color: rgba(white, 0.2);
    color: $selected_fg_color;
  }

  &:checked:disabled {
    background-color: rgba(white, 0.1);
    color: rgba($selected_fg_color, 0.65);
  }
}

%budgie_panel_button {
  color: $panel_fg;
  background: none;

  &:hover {
    color: $selected_fg_color;
    background-color: rgba(white, 0.05);
  }

  &:disabled {
    color: rgba($panel_fg, 0.5);
    background: none;
  }

  &:active {
    background-color: rgba(white, 0.15);
    color: $selected_fg_color;
  }

  &:checked {
    background-color: rgba(white, 0.08);
    color: $selected_fg_color;
  }

  &:checked:disabled {
    background-color: rgba(white, 0.05);
    color: rgba($selected_fg_color, 0.65);
  }
}

.budgie-popover {
  margin: 0;
  padding: 0;
  border-color: $borders_color;
  border-radius: $bt_radius;
  background-color: if($variant=='light', $base_color, $bg_color);
  box-shadow: 0 3px 5px if($variant == 'light', rgba(black, 0.12), rgba(black, 0.1)), 0 0 0 1px $borders_color;

  frame.container {
    padding: 6px;
    border: none;

    .container {
      padding: 0;
    }
  }

  border { border: none; }

  list {
    background-color: transparent;

    &.content-box {
      row.activatable {
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
      }
    }
  }

  viewport.frame > list > row.activatable {
    border-radius: $bt_radius;

    button {
      border: none;
      background-color: transparent;
    }
  }

  treeview.view.sidebar { //AppMenu (budgie)
    background: none;
    border-right: none;
    color: $fg_color;

    label { padding: 3px 8px; }

    &:hover { background-color: rgba($fg_color, 0.05); }

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

  scrolledwindow.sidebar:not(.categories) { //AppMenu (Elementary)
    background: none;
    border-right: none;
    color: $fg_color;

    label { padding: 4px 6px; }

    list > row.activatable {
      &:hover { background-color: rgba($fg_color, 0.05); }

      &:active { background-image: image(rgba($fg_color, 0.12)); }

      &:selected, &:selected:hover {
        color: $selected_fg_color;
        background-color: $selected_bg_color;
      }
    }
  }

  stack > widget scrolledwindow:not(.sidebar) > viewport.frame {
    > list > row.activatable {
      &:hover { background-color: rgba($fg_color, 0.05); }

      &:active { background-image: image(rgba($fg_color, 0.12)); }

      &:selected, &:selected:hover {
        color: $fg_color;
        background-color: rgba($fg_color, 0.08);

        label { color: $fg_color; }
      }
    }
  }

  > frame.container > grid.horizontal > grid.horizontal {
    > widget > grid.horizontal > stack {
      border-top: 1px solid $borders_color;
    }
  }

  &.bottom > frame.container > grid.horizontal > grid.horizontal {
    > widget > grid.horizontal > stack {
      border-top: none;
      border-bottom: 1px solid $borders_color;
    }
  }

  &:not(.budgie-menu) button.flat:not(.image-button) {
    @extend %budgie_button_transition;
    min-height: 28px;
    padding: 0 8px;
    color: rgba($fg_color, 0.85);
    font-weight: normal;
    border: 1px solid transparent;
    transition: none;

    &:hover {
      background-color: if($variant=='light', mix($fg_color,$bg_color,5%), mix($fg_color,$bg_color,10%));
      border: 1px solid $borders_color;
    }

    &:active {
      border: 1px solid if($variant=='light', $sec_selected_bg_color, $alt_selected_bg_color);
      background-color: $selected_bg_color;
      color: $selected_fg_color;
    }

    &:disabled { color: $insensitive_fg_color; }
  }

  carousel button.flat:not(.image-button) {
    &:active:focus {
      color: $selected_bg_color;
      background-color: transparent;
      border-color: transparent;
    }
  }

  &.budgie-menu {
    .container { padding: 0; }

    &.background {
      padding: 0;
      background-color: $base_color;
    }

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

    entry.search {
      // margin: $cont_padding $cont_padding 0 $cont_padding;
      padding: 5px 10px;
      border: none;
      border-bottom: 1px solid $borders_color;
      border-radius: 0;
      box-shadow: none;
      font-size: 110%;
      // &:focus { @include entry(focus); }
    }

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

      button.category-button {
        border: none;
        border-radius: 0;

        &:not(:active):not(:checked):hover {
          background-color: rgba($fg_color, 0.1);
        }
      }
    }

    row {
      padding: 0;

      &:hover { box-shadow: none; }

      &.activatable > button {
        @extend %row_activatable;

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

        &:disabled { color: $insensitive_fg_color; }

        &:active, &:checked {
          @extend %selected_items;
          border-color: if($variant=='light', $sec_selected_bg_color, $alt_selected_bg_color);
        }

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

    list.left-overlay-menu {
      border-radius: $material_radius;
      border: 1px solid $borders_color;
      box-shadow: 0 2px 8px 0 if($variant=='light', rgba(black, 0.1), rgba(black, 0.15));
      background-color: $base_color;
      padding: 6px;
      margin: 6px;

      > row.activatable {
        border-radius: 2px;

        &:not(:last-child) {
          margin-bottom: 3px;
        }

        button.menuitem {
          border-radius: 2px;
        }
      }
    }

    .budgie-menu-footer {
      border-top: 1px solid $borders_color;
      padding: 3px;

      button.flat {
        padding: 3px;
        border-radius: 2px;

        &.image-button {
          border-radius: $circular_radius;
          padding: 6px;
          min-height: 16px;
          min-width: 16px;
          margin-left: 6px;
          background-clip: border-box;
        }
      }
    }
  }

  &.user-menu {
    .content-box { background-color: transparent; }

    separator { margin: 4px 0; background-color: $borders_color; }

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

  &.sound-popover {
    separator {
      margin: 3px 0;
      background-color: $borders_color;
    }

    > .container > box > box {
      padding-bottom: 6px;
    }

    buttonbox.linked > button {
      border-color: $borders_color;
    }
  }

  &.caffeine-popover {
    frame.container .container { padding: 6px; }
  }

  &.night-light-indicator {
    .view-header {
      padding-left: 6px;
      color: $alt_fg_color;
    }
  }

  &.icon-popover {
    separator {
      margin: 3px 0;
    }
  }

  &.places-menu {
    .places-list:not(.always-expand) {
      margin-top: 4px;
      padding-top: 4px;
      border-top: 1px solid $borders_color;
    }

    // I guess this really should be hard-coded as well as other dim-labels.
    .alternative-label {
      padding: 3px;
      font-size: 15px;
    }

    list > row.activatable {
      padding: 0;

      &, &:hover, &:active, &:selected {
        background: none;
      }
    }

    .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; }
      }
    }

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

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

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

  &.workspace-popover {
    .container { padding: 2px 8px 8px; }

    separator { margin: 4px 0; }

    flowboxchild { padding: 0; }
  }

  // Menu Button
  button.budgie-menu-launcher {
    @include button(undecorated);
  }
}

// budgie specific popover widgets
window.budgie-popover:not(.csd) {
  > frame.container {
    margin: 0 -1px -1px; // remove gap

    .bottom & { padding: 2px 0 2px; } // revive bottom padding

    &,
    > border {
      border-style: none; // hide container borders
    }
  }
}

// FIXME: workspace has unnecessary/unknown margin
.workspace-switcher {
  .workspace-layout {
    border: 0 solid rgba(white, 0.12);

    .top &,
    .bottom & {
      &:dir(ltr) { border-left-width: 1px; }

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

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

  .workspace-item {
    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
    border: 0 solid rgba(white, 0.12);

    .top &,
    .bottom & {
      &:dir(ltr) { border-right-width: 1px; }

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

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

    &.current-workspace { background-color: rgba($panel_fg, 0.08); }
  }

  .workspace-add-button {
    min-height: 24px;
    min-width: 24px;
    padding: 0;
    border-radius: $bt_radius;
  }

  .workspace-icon-button {
    .budgie-panel & { // to overwrite the .budgie-panel button style below
      min-height: 24px;
      min-width: 24px;
      padding: 0;
      border-radius: $bt_radius;
    }
  }
}

// Panel
.budgie-panel {
  transition: background-color 0.2s cubic-bezier(0, 0, 0.2, 1);
  background-color: $panel_bg;
  color: $panel_fg;
  font-weight: 500;

  &.transparent { background-color: rgba($panel_bg, 0.85); }

  .bottom & {
    &.dock-mode {
      border-radius: 5px 5px 0 0;

      .icon-tasklist {
        > box > revealer {
          &:first-child > button.launcher { border-top-left-radius: 5px; }
          &:last-child > button.launcher { border-top-right-radius: 5px; }
        }
      }
    }
  }

  .left & {
    &.dock-mode {
      border-radius: 0 5px 5px 0;

      .icon-tasklist {
        .launcher {
          &:first-child { border-top-right-radius: 5px; }
          &:last-child { border-bottom-right-radius: 5px; }
        }
      }
    }
  }

  .right & {
    &.dock-mode {
      border-radius: 5px 0 0 5px;

      .icon-tasklist {
        .launcher {
          &:first-child { border-top-left-radius: 5px; }
          &:last-child { border-bottom-left-radius: 5px; }
        }
      }
    }
  }

  button {
    min-height: 16px;
    min-width: 16px;
    padding: 0;
    border-radius: 0;
    border: none;
    @extend %budgie_panel_button;
  }

  &.horizontal button { padding: 0 6px; }
  &.vertical button { padding: 6px 0; }

  separator { background-color: rgba($panel_fg, 0.12); }

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

    > menuitem {
      &.budgie-menubar {
        border: none;

        &:hover { background-color: rgba($panel_fg, 0.10); }
      }
    }
  }

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

  // Tasklist
  #tasklist-button:not(.flat) {
    padding: 0 4px;
    @extend %underscores;
    @extend %budgie_panel_button;
    @include button(undecorated);
    box-shadow: none;
  }

  &.vertical #tasklist-button { min-height: 32px; }

  // Icon Tasklist
  button.flat.launcher {
    padding: 0;
    @include button(undecorated);

    // for indicator colors
    &:not(:checked) {
      color: $panel_fg;

      &:hover, &:active { color: rgba($panel_fg, 0.8); }
      &:disabled { color: rgba($panel_fg, 0.5); }
    }
  }

  // Add padding for panel indicators icons
  > box > widget > widget {
    > image, // normal
    > stack > image, // Screenshot
    > box > image { // Places
      margin-left: 6px;
      margin-right: 6px;
    }

    > box > image + label { // Reset for mailneg
      margin-left: -4px;
    }

    > box { // keyboard Layout
      > widget > image { margin-left: 6px; }
      > stack > widget > label { margin-right: 6px; }
    }

    > box > widget > widget > image { // Status
      margin-left: 2px;
      margin-right: 2px;
    }
  }

  // Time label
  .budgie-clock-applet,
  .budgie-calendar-applet {
    > widget > box {
      padding-left: 3px;
      padding-right: 3px;
    }
  }
}

%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},
                                      $selected_bg_color 0%,
                                      transparent 0%)
                                      0 0 0 0 / 0 0 0 0;
      }

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

.budgie-panel {
  @at-root %budgie_icon_tasklist_button,
  button.flat.launcher {
    min-width: 16px;
    min-height: 16px;
    padding: 0;
    border-radius: 0;
    border: none;
    background-position: center center;

    > image { opacity: 0.87; }

    &:hover {
      -gtk-icon-effect: highlight;
      > image { opacity: 1.0; }
    }

    &:active {
      > image { opacity: 1.0; }
    }

    &:checked {
      &:hover { -gtk-icon-effect: highlight; }
      > image { opacity: 1.0; }
    }
  }

  @at-root %running_budgie_icon_tasklist_button,
  .unpinned button.flat.launcher,
  .pinned button.flat.launcher.running,
  .pinned button.launcher.running.sidebar-button {
    &:hover { -gtk-icon-effect: highlight; }

    > image {
      background-repeat: no-repeat;
      opacity: 1.0;
    }

    &:checked {
      > image { background-image: none; }
    }
  }
}

box:not(.unpinned):not(.pinned) > revealer > button.flat.launcher { border-image: none; } // unset before drawing indicators

// icon tasklist styling
%icon_tasklist_droptarget,
box.pinned { // drop-target
  &:drop(active) {
    border: none;
    border-radius: 0;
    background-color: rgba($selected_bg_color, 0.2);
    box-shadow: inset 0 0 0 1px $selected_bg_color;
  }
}

// upcoming icon tasklist
widget.icon-tasklist {
  > box:drop(active) { // drop-target
    @extend %icon_tasklist_droptarget;
  }
}

*:drop(active):focus,
*:drop(active) {
  box-shadow: inset 0 0 0 1px $selected_bg_color;
}

frame.raven-frame > border {
  border-style: none;
}

$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 $borders_color; }

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

  // Shadows
  .#{$pos} .shadow-block {
    padding: 0;
    margin: 0;
    background-color: transparent;
    background-image: linear-gradient(to $b_pos, rgba(black, 0.23), rgba(black, 0.08), transparent);
  }
}

// Raven Trigger
button.raven-trigger {
  // padding: 0 4px;
  &:hover, &:active, &:checked { color: $panel_fg; }
}

// Raven
.raven {
  background-color: $bg_color;

  // for >=10.4
  > box { margin-bottom: -10px; }

  // for <10.4
  > stack { margin-bottom: -10px; }

  button.image-button {
    @extend %circular_button;

    &:active, &:checked {
      background-clip: border-box;
      border-color: if($variant=='light', $sec_selected_bg_color, $alt_selected_bg_color);
    }
  }

  .raven-header {
    min-height: 36px;
    padding: 3px;

    &:not(.top) {
      button {
        @extend %budgie_button_transition;

        &.image-button {
          border-radius: $circular_radius;
          -gtk-outline-radius: $circular_radius;
          min-height: 28px;
          min-width: 28px;
          margin: 0;
          padding: 0;
        }

        &.flat {
          &:active, &:checked {
            background-clip: border-box;
            border-color: if($variant=='light', $sec_selected_bg_color, $alt_selected_bg_color);
          }
        }
      }
    }

    &.top {
      padding: 0 $cont_padding;
      background-color: $header_bg;
      color: $header_fg;
      box-shadow: inset 0 -1px $borders_color;

      stackswitcher { padding: 0; }

      stackswitcher button {
        margin: -4px 0;
        min-height: 36px;
        min-width: 100px;
        border-radius: 0;
        border: none;
        background-color: transparent;
        color: $header_fg;

        &:hover {
          color: $alt_header_fg;
          border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                        rgba($selected_bg_color, 0.5) 100%,
                                        transparent 0%)
                                        0 0 2 / 0 0 2px;
        }

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

        &:disabled { color: rgba($header_fg, 0.5); label { color: rgba($header_fg, 0.5); }}
      }

      // for <10.4
      button.image-button {
        &:dir(ltr) { margin-right: 2px; }
        &:dir(rtl) { margin-left: 2px; }
      }

      // for <10.4
      > image { margin: 0 8px; }

      // for <10.4
      > label {
        margin: 0 -8px;
        font-weight: bold;
      }
    }

    &.bottom { border-top: 1px solid $borders_color; }
  }

  viewport.frame .raven-header { margin-top: -8px; }

  .expander-button { @extend %circular_button; }

  .raven-background {
    border-style: solid none;
    border-width: 1px;
    border-color: $borders_color;
    background-color: $base_color;

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

    // for <10.4
    &.frame { border-style: solid none; }

    > overlay > widget > image { color: gtkalpha(currentColor, 0.12); }

    // for <10.4
    grid > label:first-child { min-height: 26px; } // workaround to fix vertical-align

    // for <10.4
    spinbutton:not(.vertical) {
      &, &:focus {
        min-height: 0;
        padding: 2px;
        background-image: none;
        border-color: transparent;
        border-radius: 0;
      }
    }
  }

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

  // for <10.4
  .raven-header.top + .raven-background {
    border-style: none;
    background-color: $selected_bg_color;
    color: $selected_fg_color;

    stackswitcher button { margin: -4px 0; }
  }

  .powerstrip button.image-button {
    min-height: 28px;
    min-width: 28px;
    margin: 0 4px;
    padding: $cont_padding;
  }

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

  .audio-widget {
    .raven-background {
      .devices-list {
        padding: $cont_padding;

        > row {
          border-radius: 2px;

          &:not(:last-child) {
            margin-bottom: $cont_padding / 2;
          }
        }
      }

      stackswitcher {
        padding: $cont_padding;
      }
    }
  }

  // MPRIS Applet
  .raven-mpris {
    background-color: rgba(black, 0.5);
    color: white;

    label { min-height: 24px; }

    button.image-button {
      padding: $cont_padding;
      border: none;
      @extend %budgie_panel_button_flat;
    }
  }

  .mpris-widget {
    .raven-header {
      background-color: rgba(black, 0.75);
      color: white;

      button.image-button {
        border: none;
        @extend %budgie_panel_button_flat;
      }
    }

    .raven-background {
      background-color: rgba(black, 0.65);
      color: white;
      border: none;

      image.raven-mpris {
        background-color: rgba(white, 0.1);
        color: rgba(white, 0.65);
        border-radius: 3px;
      }

      .raven-mpris-controls {
        // background-color: rgba(black, 0.35);
        // border-radius: $circular_radius;
        margin-top: 3px;
        // padding: 3px;

        > button {
          padding: $cont_padding;
          border: none;
          @extend %budgie_panel_button_flat;

          &:not(:first-child):not(:last-child):not(:hover):not(:active) {
            background-color: rgba(white, 0.06);
          }
        }
      }
    }
  }
}

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

  &:selected {
    border-radius: $bt_radius;
    background-color: $selected_bg_color;
  }
}

// some specific scale styling
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,
    //                         rgba($success_color, 0.25) calc(66% - 3px),
    //                         rgba($destructive_color, 0.25) calc(66% - 3px),
    //                         rgba($destructive_color, 0.25) 100%);
    //     }
    //   }
    // }

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

// 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: -6px;
      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);
          border-color: if($variant=='light', $sec_selected_bg_color, $alt_selected_bg_color);
          background-clip: border-box;

          image { color: white; }
        }
      }

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

        > row.activatable {
          border-bottom: 1px solid $borders_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($selected_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: $selected_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($selected_bg_color, 0.65);
            }
          }
        }
      }
    }
  }
}

.raven-notifications-group {
  .raven-notifications-group-header {
    padding-left: $cont_padding;
  }

  list > row {
    border-radius: $bt_radius;
    padding: $cont_padding;

    .notification-clone {
      padding-left: $cont_padding;
    }

    button.flat {
      @extend %circular_button;
    }
  }
}

.devices-list.sound-devices {
  > row.activatable > box.horizontal {
    label { padding-left: 8px; }
  }
}

// Notifications
.budgie-notification-window {
  background-color: transparent;
  background-image: none;
  border-radius: $bt_radius;

  button.image-button.close { // 'close'
    @extend %circular_button;
    background-clip: border-box;

    &:not(:hover):not(:active) {
      @include button(undecorated);
    }
  }
}

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

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

// 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: 8px 12px;
  padding: $cont_padding;
  border-radius: $material_radius;
  background-color: $base_color;
  color: $text_color;
  box-shadow: 0 2px 5px 0 if($variant == 'light', rgba(black, 0.15), rgba(black, 0.12)),
              0 4px 8px 0 if($variant == 'light', rgba(black, 0.15), rgba(black, 0.12)),
              0 0 0 1px $borders_color;
}

%budgie_dialog {
  background-color: $base_color;
  border-radius: $material_radius;

  &.background.csd,
  decoration { border-radius: $material_radius; }

  > box > grid {
    padding: 24px;
  }
}

// power dialog window
window.budgie-power-dialog {
  background-color: $base_color;
  border-radius: $material_radius;

  &.background.csd,
  decoration { border-radius: $material_radius; }
}

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

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

  buttonbox.linked.horizontal > button {
    padding: 6px 16px;
    border: none;
    border-top: 1px solid $borders_color;
    border-radius: 0;

    &:active, &:checked {
      transition: background-color 0.00001s 0.3s;
      animation: ripple_effect 0.3s cubic-bezier(0.0, 0.0, 0.2, 1);
    }

    &:first-child { border-bottom-left-radius: $material_radius; }
    &:last-child { border-bottom-right-radius: $material_radius; }
  }

  buttonbox.linked.horizontal > button:not(.suggested-action):not(.destructive-action) {
    &:hover {
      background-color: gtkalpha($fg_color, 0.06);
      border-color: $borders_color;
      transition: $button_transition;
    }

    &:active, &:checked {
      color: $fg_color;
      background-color: gtkalpha($fg_color, 0.1);
      border-color: $borders_color;
    }
  }
}

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

  .message { color: gtkalpha(currentColor, 0.6); }
  .failure { color: $destructive_color; }

  > box > grid {
    padding: 24px 24px 0;
  }
}

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

  entry.search {
    font-size: 120%;
    padding: 6px 12px;
    // margin: 6px;
    border-radius: 0;
    // box-shadow: inset 0 1px $highlight;
    background-color: transparent;
    border: none;

    &:focus {
      border: none;
    }
  }

  list .dim-label { opacity: 1; }

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

// pixel-saver(?) applet
.budgie-panel box.titlebar {
  min-width: 20px;
  min-height: 20px;
  border-radius: 0;
  background: unset;
  box-shadow: none;
  border: none;

  > widget > label { color: $panel_fg; } // titles

  > button.image-button.titlebutton {
    min-width: 20px;
    min-height: 20px;
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    color: $panel_fg;

    image {
      border-radius: 100px;
      background-size: 20px 20px;
      background-position: center center;
      background-repeat: no-repeat;
      transition-duration: 0;
    }

    &:hover,
    &:active {
      background: none;
      box-shadow: none;
      color: $selected_fg_color;
      animation: none;
    }

    &.close {
      &:hover image { background-image: image($destructive_color); }
      &:active image { background-image: image(darken($destructive_color, 10%)); }
    }

    &:not(.close) {
      &:hover image {
        background-image: image(rgba($selected_fg_color, 0.2));
      }

      &:active image {
        background-image: image(rgba($selected_fg_color, 0.35));
      }
    }

    // hide unneeded button images when Raven widget was shown
    &:disabled image { opacity: 0; }
  }

  &.horizontal { // spacing
    padding: 0 3px;

    > widget > label {
      &:dir(ltr) { padding-right: 3px; }
      &:dir(rtl) { padding-left: 3px; }
    }

    > button.image-button.titlebutton { padding: 0 3px; }
  }
}

//
// Budgie Apps
//

.budgie-container { background-color: transparent; }

.budgie-settings-window {
  list.sidebar {
    border-radius: 0 0 0 $corner_radius;

    row:not(:hover):not(:selected) {
      background: none;
    }
  }

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

    button {
      @extend %linked;
      @extend %budgie_button_transition;
    }
  }
}
