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

// specific ripple-effect for IconTaskList
@keyframes budgie_ripple_effect {
  0% {
    background-image: radial-gradient(
                        circle farthest-corner at center,
                        gtkopacity($inverted_fg_color, 0.25) 0%,
                        transparent 0%),
                      image(gtkopacity($inverted_fg_color, 0.12));
  }
  66% {
    background-image: radial-gradient(
                        circle farthest-corner at center,
                        gtkopacity($inverted_fg_color, 0.25) 100%,
                        transparent 0%),
                      image(gtkopacity($inverted_fg_color, 0.12));
  }
  100% {
    background-image: radial-gradient(
                        circle farthest-corner at center,
                        gtkopacity($inverted_fg_color, 0) 100%,
                        transparent 0%),
                      image(gtkopacity($inverted_fg_color, 0.12));
  }
}

// specific transition
$budgie_transition: opacity 0.2s $slope_medium,
                    background-color 0.4s $slope_slow,
                    background-image 0.4s $slope_slow,
                    box-shadow 0.2s $slope_slow;

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

.budgie-panel {
  // solid-mode
  // always use dark-color of dark variant
  background-color: $panel_bg_color;
  color: $inverted_fg_color;
  font-weight: 700;
  transition: $budgie_transition;

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

  // transparent-mode
  &.transparent {
    background-color: transparent;
    color: $inverted_fg_color;
    transition: $budgie_transition;

    // draw shadows by default
    // FIXME: NaTray puts widgets as "widgets",
    // so we can not render icons-shadows anyhow...
    image { -gtk-icon-shadow: $z-depth-1; }

    label { text-shadow: $z-depth-1; }
  }
}

@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);
  }
}

// wnck tasklist styling
.budgie-panel button#tasklist-button {
  border: none;
  background-image: radial-gradient(circle farthest-corner at center,
                                    gtkopacity($inverted_fg_color, 0) 100%,
                                    transparent 0%),
                    image(gtkopacity($inverted_fg_color, 0));
  background-color: transparent;
  box-shadow: none; // unset standard wnck styling
  transition: $budgie_transition;

  image {
    min-width: 0;
    min-height: $icon_size * 1.5;

    .left &,
    .right & {
      min-width: $icon_size * 1.5;
      min-height: 0;
    }
  }

  label,
  image { opacity: 0.87; }

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

    label,
    image { opacity: 1.0; }
  }

  &:active {
    transition: $budgie_transition,
                background-image 0s;
    animation: budgie_ripple_effect 0.3s $slope_slow forwards;
  }
}

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

.budgie-panel {
  @at-root %budgie_icon_tasklist_button,
  button.flat.launcher {
    min-width: $icon_size;
    min-height: $icon_size;
    padding: 0;
    border-radius: 0;
    background-image: radial-gradient(circle farthest-corner at center,
                                      gtkopacity($inverted_fg_color, 0) 100%,
                                      transparent 0%),
                      image(gtkopacity($inverted_fg_color, 0));
    background-position: center center;
    transition: $budgie_transition;

    > image {
      opacity: 0.87;
      transition: opacity 0.2s $slope_medium,
                  background-image 0s;
    }

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

      > image { opacity: 1.0; }
    }
    &:active {
      transition: $budgie_transition,
                  background-image 0s;
      animation: budgie_ripple_effect 0.3s $slope_slow forwards;

      > image { opacity: 1.0; }
    }
    &:checked {
      background-color: transparent;
      &: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 {
    &:hover { -gtk-icon-effect: highlight; }

    > image {
      background-repeat: no-repeat;
      transition: opacity 0.2s $slope_medium,
                  background-image 0s;
      opacity: 1.0;
    }

    &:hover,
    &:active,
    &:checked {
      > image { background-image: none; }
    }
  }
}

// draw underscores and dots
@each $position, $_line, $_dot in (top, 0 3px, 6px 3px),
                                  (bottom, 0 -3px, 6px 3px),
                                  (left, 3px 0, 3px 6px),
                                  (right, -3px 0, 3px 6px) {
  .#{$position} .budgie-panel {
    button#tasklist-button,
    button.flat.launcher {
      &:hover {
        box-shadow: inset #{$_line} gtkopacity($inverted_fg_color, 0.4);
      }
      &:active,
      &:checked {
        box-shadow: inset #{$_line} $selected_bg_color;
      }
    }

    .unpinned button.flat.launcher,
    .pinned button.flat.launcher.running {
      > image {
        background-image: image($selected_bg_color);
        background-size: #{$_dot};
        background-position: #{$position} center;
      }

      &:hover,
      &:active,
      &:checked {
        box-shadow: inset #{$_line} $selected_bg_color;
      }
    }
  }
}

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

box:not(.unpinned):not(.pinned) > revealer > button.flat.launcher {
  transition: opacity 0.2s $slope_medium,
              background-color 0.4s $slope_slow,
              background-image 0.4s $slope_slow,
              box-shadow 0s $slope_slow; // exclude box-shadows

  &:hover,
  &:checked,
  &.running { box-shadow: none; } // unset before drawing indicators

  &:active {
    box-shadow: none;
    transition: opacity 0.2s $slope_medium,
                background-color 0.4s $slope_slow,
                background-image 0s $slope_slow,
                box-shadow 0s $slope_slow;
  }
}

@each $position, $_line in (top, 0 3px),
                           (bottom, 0 -3px),
                           (left, 3px 0),
                           (right, -3px 0) {
  .#{$position} {
    box:not(.unpinned):not(.pinned) > revealer > button.flat.launcher {
      &:not(:checked):hover {
        box-shadow: inset #{$_line} gtkopacity($inverted_fg_color, 0.4);
        &.running {
          box-shadow: inset #{$_line} $selected_bg_color;
        }
      }
    }
  }
}

// end region
.end-region > widget > widget {
  > box.horizontal { // 'Stats Indicator'
    > widget > widget > image { // 'bluetooth'
      &:dir(ltr) { margin: 0 2px 0 -1px; }
      &:dir(rtl) { margin: 0 -1px 0 2px; }
    }

    > widget.sound-applet > widget > image { // 'sound'
      min-width: $icon_size + 2px;
      margin: 0;
    }

    > widget > widget > box.horizontal > image,
      box.battery-icon.horizontal > image { // 'battery'
      min-width: $icon_size + 6px;
    }
  }

  box.battery-icon { // 'percent label'
    &.horizontal > label.percent-label {
      &:dir(ltr) { margin: 0 -6px 0 3px; }
      &:dir(rtl) { margin: 0 3px 0 -6px; }
    }

    &.vertical > label.percent-label {
      font-size: 75%;
      &:dir(ltr) { margin-right: -2px; }
      &:dir(rtl) { margin-left: -2px; }
    }
  }

  > image { // 'Notification' and 'User Indicator'
    min-width: $icon_size + 4px;
  }
}

// budgie specific popover widgets
window.budgie-popover:not(.csd) {
  &.background {
    @extend %popover;
    background-clip: border-box;
    // FIXME: we can't expose depth-3
    box-shadow: $z-depth-2;
  }

  > frame.container {
    margin: 0 -1px -1px; // remove gap

    &,
    > border {
      border-style: none; // hide container borders
      background-color: $secondary_base_color;
    }
  }
}

// main menu styling
.budgie-panel {
  button.flat.budgie-menu-launcher {
    min-width: $icon_size;
    min-height: $icon_size;
    padding: 0;
    border: 0 none transparent;
    border-radius: 0;
    background-image: radial-gradient(circle farthest-corner at center,
                                      gtkopacity($inverted_fg_color, 0.4) 50%,
                                      transparent 0%),
                      image(gtkopacity($inverted_fg_color, 0.5));
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 0% 0%; // hide ripples in normal state
    background-color: transparent;
    color: $inverted_fg_color;
    font-weight: 700; // enforce bold weight
    transition: background-image 0s,
                background-size 0s;
    &:hover {
      background-color: transparent;
      color: $selected_fg_color;
    }
    &:checked {
      background-image: radial-gradient(circle farthest-corner at center,
                                        gtkopacity($inverted_fg_color, 0) 50%,
                                        transparent 0%),
                        image(gtkopacity($inverted_fg_color, 0));
      background-size: 100% * 2 100% * 2;
      background-color: transparent;
      color: $selected_fg_color;
      transition: background-image 0.4s $slope_slow,
                  background-size 0.4s $slope_medium;
    }
  }
}

.budgie-menu {
  background-color: $secondary_base_color;

  &.background {
    border-style: solid none none; // remove side/bottom borders

    .container {
      padding: 2px 0 0; // remove side/bottom padding

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

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

  row.activatable { // reset background
    padding: 0;
    background-image: none;
    background-color: $secondary_base_color;
    color: $secondary_fg_color;
    transition-duration: 0s;

    // FIXME: enlarge vertical spacing with padding of icons
    image { padding: rem(8px) 0; }

    &:hover,
    &:selected {
      background-image: none;
      background-color: $secondary_base_color;
      // child button node has hover state already
      color: $secondary_fg_color;
      transition-duration: 0s;
    }

    button.flat {
      border-radius: 0; // remove roundness
      -gtk-outline-radius: 0;

      > box > label { // tweak base-line
        padding-bottom: rem(1.3px, $sw: 1.0);
      }
    }
  }

  .categories { // left-paned elements of GtkPopover
    background-color: $secondary_dark_color;
    &:dir(ltr) { border-right: 1px solid $borders_color; }
    &:dir(rtl) { border-left: 1px solid $borders_color; }

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

    button.flat.radio.category-button {
      border-radius: 0; // remove roundness
      &:not(:active) { transition-duration: 0.1s; } // use list-transition
      &:checked {
        background-image: none;
        background-color: transparent;
        color: $selected_bg_color;
        &:hover {
          background-color: $track_color;
          color: $selected_bg_color;
        }
        &:disabled {
          color: gtkopacity($selected_bg_color, 0.4);

          label { color: inherit; }
        }
      }

      > box > label { // tweak vertical spacing and font weight
        padding: rem(5.3px, $sw: 1.0) 0 rem(6.7px, $sw: 1.0);
        font-weight: 500;
      }
    }
  }
}

// user-indicator styling
.user-menu {
  background-color: $secondary_base_color;

  frame.container { padding: (6px + 2px) 6px 6px; }

  list,
  row { // reset styling
    border: none;
    background: none;
    box-shadow: none;
  }

  row {
    &.activatable { // stop weird and unhandled ripple-effect
      &, .indicator-item {
        &:active,
        &:selected { animation: none; }
      }

      background-image: none;
      background-color: $secondary_base_color;
      color: $secondary_fg_color;
      transition-duration: 0s;

      .indicator-item {
        label,
        image { color: $secondary_fg_color; }
      }

      // FIXME: enlarge vertical spacing with padding of icons
      image { padding: rem(5.3px) 0 rem(6.7px); }

      // use asymmetrical separators
      separator.horizontal {
        min-width: 1px;
        min-height: 1px;

        &:dir(ltr) { border-left: $icon_size * 2 solid transparent; }
        &:dir(rtl) { border-right: $icon_size * 2 solid transparent; }
      }

      &:hover,
      &:selected {
        background-image: none;
        background-color: $secondary_base_color;
        color: $secondary_fg_color;
        transition-duration: 0s;

        .indicator-item {
          label,
          image { color: $secondary_fg_color; }

          &:hover,
          &:active,
          &:checked {
            label,
            image { color: $fg_color; }
          }
        }
      }
    }
  }

  // top-row (user-name and avatar)
  > frame.container > box.vertical row.activatable:first-child {
    margin-bottom: rem(10.7px); // fix truncated drop-shadow
    outline-offset: 0;
    outline-width: 0;

    .indicator-item {
      background-image: linear-gradient(to right, $borders_color);
      background-repeat: no-repeat;
      background-size: 38px auto; // non-scaling unit
      background-color: $suggested_color;
      box-shadow: $z-depth-1,
                  inset 0 1px $highlight_color;
      transition-timing-function: $slope_medium;
      transition-property: box-shadow;
      transition-duration: 0.2s;

      &:dir(ltr) { // mask avatar's background
        padding-left: 7px; // non-scaling unit
        background-position: left center;
      }
      &:dir(rtl) {
        padding-right: 7px;
        background-position: right center;
      }

      label {
        color: $secondary_selected_fg_color;

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

      image {
        color: $secondary_selected_fg_color;

        &:first-child { // avatar image
          min-width: 24px;
          min-height: 20px;
          padding-top: rem(6.7px);
          opacity: 0.9;
        }
      }

      &:hover {
        box-shadow: $z-depth-2,
                    inset 0 1px $highlight_color;
        transition-timing-function: $slope_medium;
        transition-property: box-shadow;
        transition-duration: 0.2s;

        label { color: $selected_fg_color; }

        image {
          color: $selected_fg_color;

          &:first-child { opacity: 1.0; }
        }
      }

      label { font-weight: 700; }
    }
  }
}

// raven styling
.raven-frame { // hide frame
  > border { border: none 0 transparent; }
}

.raven {
  padding: 0;
  border: none;
  color: $secondary_fg_color;
  background-color: $secondary_dark_color;

  .raven-header {
    border: none;
    color: $tertiary_fg_color;
    background-color: transparent;
    font-weight: 700;

    &.top { // always use dark variant
      background-color: $inverted_dark_color;
      color: $inverted_fg_color;
      box-shadow: if($variant == light, $header-shadow-light,
                                        $header-shadow-dark);

      button.text-button {
        color: $inverted_secondary_fg_color;
        &:hover,
        &:active,
        &:checked { color: $inverted_fg_color; }
        &:disabled { color: $insensitive_inverted_fg_color; }
      }
    }

    // reduce the gap between child elements
    &:not(.top):not(.bottom) { margin-top: rem(-10.7px); }
  }

  .raven-background {
    border-width: 1px 0 0;
    border-style: solid none none;
    border-color: $borders_color;
    background-color: transparent;
    box-shadow: if($variant == light, $inline-shadow-light,
                                      $inline-shadow-dark);
  }

  .powerstrip {
    background-color: $panel_bg_color;
    box-shadow: none;

    // = stackswitcher width in raven-header
    $strip_width: rem(112px * 2, $sw: 1.0);

    button.flat.image-button {
      min-width: $strip_width / 3;
      margin: -2px -8px;
      padding: rem(6.7px, $sw: 1.0) 0;
      color: $inverted_fg_color;
      &:hover,
      &:active,
      &:checked { color: $selected_fg_color; }
    }
  }

  scrolledwindow,
  list { background: transparent; }

  row.activatable {
    background-color: transparent;
    &:hover { color: $fg_color; }
    &:selected {
      &, label { color: $selected_bg_color; }

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

  // use flat-style
  button.image-button {
    @include button(flat-normal);
    &:hover {
      @include button(flat-hover);
      -gtk-icon-effect: highlight;
      }
    &:active { @include button(flat-active); }
    &:disabled { @include button(flat-insensitive); }
    &:checked { @include button(flat-checked); }
    &:checked:disabled { @include button(flat-checked-insensitive); }
  }

  .raven-header {
    > .linked { margin: 0 rem(10.7px, $sw: 1.0); }

    button.flat.expander-button { // expander arrow buttons
      min-width: $icon_size;
      min-height: $icon_size;
      padding: rem(8px);
      border-radius: 100px;
      -gtk-outline-radius: 100px;
      color: $tertiary_fg_color;
      &:hover,
      &:active { color: $fg_color; }

      &:dir(ltr) { margin-right: rem(2.7px); }
      &:dir(rtl) { margin-left: rem(2.7px); }
    }

    button.flat.image-button.primary-control { // close button in MPRIS
      min-width: $icon_size;
      min-height: $icon_size;
      padding: rem(8px);
      color: gtkopacity($destructive_color, 0.87);
      &:hover,
      &:active,
      &:checked { color: $destructive_color; }
      &:disabled { color: gtkopacity($destructive_color, 0.4); }
    }
  }

  stackswitcher.linked > button.text-button.radio { // switcher buttons
    min-width: rem(112px, $sw: 1.0);
    min-height: $widget_size - if($ref_weight < 1.0, 10.7px, 5.3px);
    padding-top: 0;
    padding-bottom: 0;
    // show underlines for :checked only
    &:not(:checked) { border-image: none; }

    label { padding-bottom: rem(1.3px); }
  }

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

  // notification list
  box.vertical > stack > box.vertical > .raven-background {
    > viewport.frame > list > row.activatable {
      padding-bottom: 4px;
      border-bottom: 1px solid $borders_color;
      &:selected {
        &, &:focus {
          background-color: gtkopacity($selected_bg_color, 0.25);
          &:dir(ltr) { box-shadow: inset 4px 0 $selected_bg_color; }
          &:dir(rtl) { box-shadow: inset -4px 0 $selected_bg_color; }

          > grid > label {
            &, &.dim-label {
              color: $fg_color;
              opacity: 1.0;
            }
          }

          > grid > image { color: $fg_color; }
        }
      }
    }
  }

  // reduce height of scale node
  scale { padding: rem(10px - 2px, $sw: 1.0); }
}

// MPRIS Applet
.raven-mpris {
  border: none;
  color: $fg_color;
  background-color: gtkopacity($dark_color, 0.9);

  button.image-button { padding: rem(8px); }
}

// clock-applet styling
widget.budgie-clock-applet > widget > box > label {
  font-size: 100%;
  &:first-child {
    &:dir(ltr) { margin-left: 3px - 1px; }
    &:dir(rtl) { margin-right: 3px - 1px; }
  }
  &:last-child {
    &:dir(ltr) { margin-right: 3px + 2px; }
    &:dir(rtl) { margin-left: 3px + 2px; }
  }

  .top &,
  .bottom & {
    &:only-child {
      &:dir(ltr) {
        margin-left: 3px - 1px;
        margin-right: 3px - 2px;
      }
      &:dir(rtl) {
        margin-left: 3px - 2px;
        margin-right: 3px - 1px;
      }
    }
  }

  .left &,
  .right & {
    font-size: 80%;
    &:first-child {
      margin-top: 3px + 2px;
      margin-bottom: 0;
    }
    &:last-child {
      margin-top: 0;
      margin-bottom: 3px + 1px;
      // specificity bump
      &:only-child { margin-top: 3px + 2px; }
    }
  }
}

// popover of sound-indicator styling
window.sound-popover.background box.horizontal {
  > button.flat.image-button { // horizontal layout
    min-width: rem($widget_size - 6.7px, $sw: 1.0);
    min-height: rem($widget_size - 6.7px, $sw: 1.0);
    margin: 0;
    padding: 0;

    &:first-child { // '-' button
      &:hover {
        background: none;
        color: $error_color;
        animation: volume_hover 0.2s linear forwards;
      }
    }

    &:last-child { // '+' button
      &:hover {
        background: none;
        color: $success_color;
        animation: volume_hover 0.2s linear forwards;
      }
    }
  }

  > scale.horizontal {
    padding-top: rem(5.3px, $sw: 1.0);
    padding-bottom: rem(5.3px, $sw: 1.0);
  }
}

// night-light-indicator styling
.night-light-indicator {
  frame.container { padding: (6px + 2px) 6px 6px; }

  .view-header {
    label {
      @extend %dim_label;
      font-size: 15px;
      font-weight: 400;
      &:dir(ltr) { padding-left: 4px; }
      &:dir(ltr) { padding-right: 4px; }
    }
  }

  box.vertical > button.flat.display-settings-button {
    @extend %transition; // revive transitions
    border-radius: 0;
    border: none;
    background-color: transparent;
    color: $secondary_accent_label_color;
    font-weight: 700;
    &:hover {
      @extend %transition; // revive transitions
      background-color: transparent;
      color: $accent_label_color;
    }
    &:active {
      background-color: transparent;
      color: $accent_label_color;
    }

    label { padding: rem(5.3px) 0 rem(6.7px); }
  }
}

// places-indicator styling
.places-menu {
  &.background {
    .container { padding: (6px + 2px) 6px 6px; }
  }

  box.places-section-header {
    padding: 0;

    > button.flat:not(.image-button) { // an actual child
      padding: rem(5.3px) rem(5.3px);
      border-radius: 0;
      -gtk-outline-radius: 0;
      &:not(:active) {
        transition: opacity 0.2s $slope_medium,
                    border-color 0.2s $slope_medium,
                    background-color 0.2s $slope_slow,
                    background-image 0.2s $slope_slow,
                    box-shadow 0.2s $slope_slow;
      }

      box.horizontal {
        > label {
          margin-bottom: rem(1.3px, $sw: 1.0);
          padding-bottom: rem(4px);
          font-weight: 700;
        }

        > image {
          &:first-child {
            color: $accent_color;
            &:dir(ltr) { margin-left: 4px; }
            &:dir(rtl) { margin-right: 4px; }
          }
          &:not(:first-child) { // 'arrow'
            // same margins with 'eject' button
            &:dir(ltr) { margin-right: rem(5.3px); }
            &:dir(rtl) { margin-left: rem(5.3px); }
          }
        }
      }
    }

    button.image-button {
      margin: rem(2.7px) rem(5.3px) rem(4px);
      &:not(:active) {
        transition: opacity 0.2s $slope_medium,
                    border-color 0.2s $slope_medium,
                    background-color 0.2s $slope_slow,
                    background-image 0.2s $slope_slow,
                    box-shadow 0.2s $slope_slow;
      }
    }
  }

  .alternative-label { // 'always expanded' option
    font-size: 15px; // same size with 'Local volumes' label?
    font-weight: 400;
    &:dir(ltr) { padding: 0 0 3px 3px; }
    &:dir(rtl) { padding: 0 3px 3px 0; }
  }

  box.vertical > revealer {
    > list { // drop-down list
      border: 1px solid $borders_color;
      background-color: $secondary_dark_color;
      box-shadow: if($variant == light, $inline-shadow-light,
                                        $inline-shadow-dark);

      &.always-expand { // 'always expanded' option
        // unset revealer elevations
        border: none;
        background-color: transparent;
        box-shadow: none;
      }
    }
  }

  list {
    background-color: transparent;

    > row.activatable {
      transition: none;
      &:hover,
      &:active {
        color: $fg_color;
        background-image: none;

        button.text-button.name-button { // = 'toolbutton > button'
          &,
          &:hover,
          &:active {
            color: $fg_color;
            background-color: transparent;
            transition: none;
            animation: none;
          }
          &:active { animation: flat_ripple_effect 0.2s $slope_slow forwards; }
        }
      }

      button.image-button { // revive button transitions
        &:not(:active) {
          transition: opacity 0.2s $slope_medium,
                      border-color 0.2s $slope_medium,
                      background-color 0.2s $slope_slow,
                      background-image 0.2s $slope_slow,
                      box-shadow 0.2s $slope_slow;
        }
      }

      button.text-button.name-button {
        > box.horizontal { // adjust spacing
          > image { margin: rem(5.3px) 0; }

          > label { padding: rem(5.3px) 0 rem(6.7px); }
        }
      }

      button.image-button.unmount-button {
        &:not(.text-button) { // specificity bump for overriding our default
                              // 'eject' button spacing
          margin: rem(1.3px) rem(5.3px);
          padding: rem(4px);
        }
      }
    }

    label.dim-label {
      font-size: 90%;
      font-weight: 700;
    }
  }

  box.unlock-area {
    border-width: 1px 0 1px;
    border-style: solid none solid;
    border-color: $borders_color;
    background-color: $secondary_dark_color;
    box-shadow: if($variant == light, $inline-shadow-light,
                                      $inline-shadow-dark);

    entry { // where is the combo node?
      min-height: $icon_size;
      min-width: $icon_size;
      margin: rem(1.3px) rem(5.3px);
      padding: rem(4px);
    }

    button {
      min-height: $icon_size;
      min-width: $icon_size;
      margin: rem(1.3px) rem(5.3px);
      padding: rem(4px);
      border-radius: 2px; // revert to square button
      -gtk-outline-radius: 2px;
    }
  }
}

// keyboard indicator applet
.top,
.bottom {
  widget.keyboard-indicator >  widget > box.horizontal {
    > widget > image {
      margin-top: rem(-0.7px, $sw: 1.0);
      &:dir(ltr) { padding: 1.3px 0 0 3px; }
      &:dir(rtl) { padding: 1.3px 3px 0 0; }
    }

    > stack > widget.keyboard-label > label {
      margin-top: rem(-0.7px, $sw: 1.0);
      &:dir(ltr) { padding: 1.3px 3px rem(1.3px, $sw: 1.0) 0; }
      &:dir(rtl) { padding: 1.3px 0 rem(1.3px, $sw: 1.0) 3px; }
    }
  }
}

// separator applet
.budgie-panel > box > widget > separator {
  background-color: $panel_separator_color;
}

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

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

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

      button.workspace-icon-button {
        min-width: $icon_size;
        min-height: $icon_size;
        padding: 4px;
        border-radius: 2px;
        transition: $budgie_transition;

        > 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_flat_normal;
    min-width: $icon_size;
    min-height: $icon_size;
    padding: 4px;
    border-radius: 0;
    color: $inverted_secondary_accent_label_color;
    background-color: transparent;
    &:hover {
      @extend %button_flat_hover;
      background-color: transparent;
      color: $inverted_accent_label_color;
    }
    &:active {
      @extend %button_flat_active;
      background-color: transparent;
      color: $inverted_accent_label_color;
    }
    &:disabled { @include button(flat-insensitive); }
  }
}

window.budgie-popover.workspace-popover {
  $max_children_per_line: 4;
  $requested_width: 150px;

  box.workspace-popover-button-box {
    > button.flat { // 'Rename' and 'Remove'
      min-width: $requested_width;
      padding: rem(5.3px) rem(8px + 5.3px) rem(6.7px);
      border-radius: 0;
      -gtk-outline-radius: 0;
      font-weight: 500;

      &:first-child { // draw an arrow
        &:dir(ltr) {
          border-image:-gtk-icontheme("pan-end-symbolic")
                                      0 13.3 0 0 / 0 13.3px 0 0;
        }
        &:dir(rtl) {
          border-image:-gtk-icontheme("pan-end-symbolic-rtl")
                                      0 0 0 13.3 / 0 0 0 13.3px;
        }
      }
    }

    // hide unneeded separators
    > separator.horizontal {
      min-height: 0;
      margin: 0;
      background-color: transparent;
    }
  }

  flowboxchild { // apps icon grid
    button.flat:not(:active) {
      transition-property: opacity,
                           border-color,
                           border-image,
                           background-color,
                           background-image,
                           box-shadow,
                           icon-shadow;
      transition-timing-function: $slope_slow;
      transition-duration: 0.2s;
    }

    image {
      padding: ($requested_width - $icon_size * ($max_children_per_line + 1))
               / ($max_children_per_line * 2)
               0;
    }
  }
}

// show-desktop applet
.budgie-panel > box > widget > button.flat {
  // specificity bump to prevent conflicts
  &:not(.raven-trigger):not(.budgie-menu-launcher) {
    min-width: $icon_size;
    min-height: $icon_size;
    border-radius: 0;
    color: $inverted_tertiary_fg_color; // dim normal state
    transition: $budgie_transition;
    &:hover {
      background-image: image(transparent);
      background-color: transparent;
      color: $selected_fg_color;
    }
    &:active {
      color: $selected_fg_color;
      transition: $budgie_transition,
                  background-image 0s;
      animation: budgie_ripple_effect 0.3s $slope_slow forwards;
    }
    &:checked {
      background-image: image(transparent);
      background-color: transparent;
      color: $selected_bg_color;
    }
  }
}

// notifications
%budgie_notification_window,
.budgie-notification-window,
.budgie-osd-window {
  border-radius: 2px;
  background-color: transparent;

  // draw actual backgrounds
  .drop-shadow { background-color: gtkopacity($inverted_dark_color, 0.9); }
}

%budgie_notification,
.budgie-notification,
.budgie-osd {
  // always use dark-variant
  color: $inverted_fg_color;
  background-color: transparent;

  .notification-title {
    color: $inverted_secondary_fg_color;
    font-size: 110%;
    font-weight: 500;
  }

  .notification-body {
    color: $inverted_fg_color;
    font-size: 90%;
    font-weight: 400;
  }

  .budgie-osd-text {
    color: $inverted_fg_color;
    font-size: 110%;
  }

  progressbar { // mimic level-bar
    min-height: 4px;
    padding: 2px;
    border-radius: 2px;
    background-color: $inverted_dark_color;
    box-shadow: $z-depth-1;

    trough {
      color: $inverted_fg_color;
      background-color: $outline_track_color;
    }

    progress { background-color: $success_color; }
  }
}

.budgie-notification,
.budgie-osd,
.budgie-session-dialog,
.budgie-polkit-dialog,
.drop-shadow {
  button,
  .linked > button { // OSD-style buttons
    border-image: none; // hide underlines
    color: $inverted_secondary_accent_label_color;
    &:hover,
    &:active,
    &:checked { color: $inverted_accent_label_color; }
    &:disabled { color: gtkopacity($inverted_accent_label_color, 0.4); }
  }
}

// alt-tab apps switcher styling
$child_margin: 2px;

window.budgie-switcher-window {
  border-radius: 2px;
  background-color: transparent;

  // draw actual backgrounds and shadows
  .drop-shadow {
    margin: 16px 24px 32px; // reserve area for shadows
    border-radius: 2px;
    background-color: gtkopacity($inverted_dark_color, 0.9);
    box-shadow: $z-depth-4; // raise to level-4

    label.budgie-switcher-title { // bottom label for app titles
      // prepare for tall and dense fonts
      min-height: 13.3px * 2; // use non-scaling unit
      color: $inverted_fg_color;
      font-weight: 500;
      &:dir(ltr) { padding: 0 0 0 ($child_margin * 2); }
      &:dir(rtl) { padding: 0 ($child_margin * 2) 0 0; }
    }
  }

  flowboxchild { // icon-tiles
    margin: $child_margin;
    border-radius: 2px;
    -gtk-outline-radius: 2px;
    color: $inverted_secondary_accent_label_color;
    background-color: transparent;
    &:hover,
    &:active {
      background-color: gtkopacity($accent_color, 0.12);
      color: $inverted_accent_label_color;
    }
    &:selected { // use the same values with Gnome-Shell
      background-color: gtkopacity($accent_color, 0.25);
      color: $inverted_accent_label_color;
      -gtk-icon-effect: highlight;
      &:disabled {
        background-color: gtkopacity($inverted_fg_color, 0.12);
        -gtk-icon-effect: dim;

        &, label { color: $insensitive_inverted_fg_color; }
      }
    }
  }
}

// an internal of the parent switcher-window
.budgie-switcher {
}

// run-dialog styling
.background.csd.budgie-run-dialog {
  border-radius: 2px;
  border: none;
  background-color: gtkopacity($inverted_dark_color, 0.9);

  scrolledwindow {
    border-image: none; // remove underline indicator
    background-color: transparent;

    list {
      background-color: transparent;

      row.activatable {
        background-color: transparent;
        color: $inverted_secondary_fg_color;
        transition: none;

        .dim-label {
          color: $inverted_secondary_fg_color;
          opacity: 1.0;
        }

        &:hover,
        &:active {
          color: $inverted_fg_color;

          .dim-label {
            color: $inverted_fg_color;
            opacity: 1.0;
          }
        }
      }
    }
  }

  box > box {
    entry {
      min-height: rem($widget_size, $sw: 1.0);
      color: $inverted_fg_color;
      caret-color: $inverted_fg_color;
      font-size: 110%;
      &:focus {
        color: $selected_fg_color;
        caret-color: $selected_fg_color;
      }
      &:disabled { color: $insensitive_inverted_fg_color; }

      image {
        &:not(:hover):not(:active) { color: $inverted_fg_color; }
        &:active { color: $selected_bg_color; }
        &:disabled { color: $insensitive_inverted_fg_color; }
      }
    }
  }

  scrollbar {
    border: none;
    background: none;

    slider {
      background-color: gtkopacity($inverted_tertiary_fg_color, 0.55);
      &:hover {
        background-color: gtkopacity($inverted_secondary_fg_color, 0.55);
      }
      &:active { background-color: $inverted_fg_color; }
      &:disabled { opacity: 0.4; }
    }
  }
}

// session-dialog and polkit-dialog styling
.budgie-session-dialog,
.budgie-polkit-dialog {
  border-radius: 2px;
  border-width: 0;
  // Always use dark-color of dark variant
  background-color: gtkopacity($inverted_dark_color, 0.9);
  color: $inverted_fg_color;
  font-weight: 700;

  decoration { // composite with drop-shadows
    border-radius: 2px;
    box-shadow: $z-depth-4;
    &:backdrop {
      box-shadow: $z-depth-2-backdrop;
      transition: none;
    }
  }

  buttonbox.linked > button {
    padding: rem(9.3px) rem(13.3px) rem(10.7px);
    border: 2px solid transparent;
    border-radius: 0;

    &:first-child {
      border-radius: 0 0 0 2px;
      border-right-width: 0;
    }
    &:last-child {
      border-radius: 0 0 2px 0;
      border-left-width: 0;
    }
  }
}

// polkit-dialog specific styling
.budgie-polkit-dialog {
  entry {
    &, &:focus {
      color: $inverted_fg_color;
      caret-color: $inverted_fg_color;
    }
    &:disabled { color: $insensitive_inverted_fg_color; }
  }

  .message { color: $inverted_secondary_fg_color; }

  .failure {
    color: $error_color;
    font-weight: 700;
  }
}

// raven-controller applet
button.flat.raven-trigger {
  min-width: $icon_size;
  min-height: $icon_size;
  padding: 0;
  border-radius: 0;
  color: $inverted_fg_color;
  transition: $budgie_transition;
  &:hover,
  &:checked {
    background-image: image(transparent);
    background-color: transparent;
    color: $selected_fg_color;
  }
  &:active {
    color: $selected_fg_color;
    transition: $budgie_transition,
                background-image 0s;
    animation: budgie_ripple_effect 0.3s $slope_slow forwards;
  }

  image { margin: 0 3px; } // add internal spacing

  .left &,
  .right & {
    image { margin: 3px 0; } // add internal spacing
  }
}

// misc settings
.drop-shadow {
  background-color: transparent;
  background-image: none;
  box-shadow: $z-depth-2;
}

// settings-window
window.background.budgie-settings-window.csd {
  > box.horizontal > scrolledwindow > viewport.frame { // left-pane
    &:dir(ltr) { border-right: 1px solid $borders_color; }
    &:dir(rtl) { border-left: 1px solid $borders_color; }
  }

  box.settings-page.vertical { // right-pane
    // reserve the margin for raised widget's drop-shadows
    box.settings-frame.vertical > grid.horizontal { margin-bottom: 6px; }

    // hide double-borders
    buttonbox.inline-toolbar { border-style: none none solid; }

    frame > box.vertical > overlay { // inline header
      > label.dim-label { // title
        font-size: 110%;
        font-weight: 500;
      }

      > button.popup.suggested-action.toggle { // 'plus' button
        @extend %gnome-software_round_button;
        margin: 8px; // prevent truncated drop-shadow
      }
    }

    frame > box.vertical list > row {
      &:dir(ltr) { padding-right: 12px; }
      &:dir(rtl) { padding-left: 12px; }

      button.desutructive-action.round-button {
        @extend %gnome-software_round_button;
      }
    }
  }
}

// pixel-saver(?) applet
.budgie-panel box.titlebar {
  border-radius: 0;
  background: unset;

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

  > button.image-button.titlebutton {
    min-width: $icon_size;
    min-height: $icon_size;
    padding: 0;
    background: none;
    color: $inverted_fg_color;

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

    &:hover,
    &:active {
      background: none;
      color: $selected_fg_color;
      animation: none;

      image { -gtk-icon-shadow: none; }
    }

    &.close {
      &:hover image { background-image: image($destructive_color); }

      &:active image { background-image: image($selected_bg_color); }
    }

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

      &:active image {
        background-image: image(gtkopacity($selected_fg_color, 0.25));
      }
    }

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


// /*******************
//  * Lightdm-Greeter *
//  *******************/

%greeter_panel_window {
  background-image: image($panel_bg_color);
  color: $inverted_fg_color;
  box-shadow: none;
  font-weight: 700;
  text-shadow: none;

  &, &.background,
  > * > * { background-color: transparent; } // FIXME: ugly wildcard
}

%greeter_panel_menubar {
  @extend .gnome-panel-menu-bar;
  background-color: transparent;
  color: $inverted_fg_color;

  &:hover {
    color: $selected_fg_color;
    box-shadow: inset 0 2px $selected_bg_color;

    label,
    image { color: $selected_fg_color; }
  }
}

%greeter_panel_menubar_menuitem {
  // flip underline-indicator vertically
  padding: rem(5.3px, $sw: 1.0) 0 rem(6.7px, $sw: 1.0);
  background-color: transparent;
  &:hover { box-shadow: inset 0 2px $selected_bg_color; }
}

%greeter_panel_menu_menuitem {
  padding: rem(5.3px) rem(8px) rem(6.7px);
  font-weight: 400;
  text-shadow: none;

  &, label { color: $secondary_fg_color; }
  &:hover,
  &:hover label { color: $fg_color; }
  &:disabled,
  &:disabled label { color: $insensitive_fg_color; }
}

%greeter_entry {
  // prevent junmping when showing CapsLock warning
  min-height: rem($widget_size);
  padding: 0 if($ref_weight < 1.0, 4px / 2, 8px / 2);
  font-family: monospace;

  &,
  &:focus {
    color: $inverted_fg_color;
    caret-color: $inverted_fg_color;
  }
  &:disabled { color: $insensitive_inverted_fg_color; }
}

%non_csd_menu {
  margin: unset;
  padding: 1px;
  border-radius: 0;
  border-width: 1px;
  border-style: solid;
  border-color: $menu_highlight_color
                $solid_light_borders_color
                $solid_light_borders_color;
  background-clip: border-box;
}

// gtk-greeter
.lightdm-gtk-greeter {
  // top-panel styling
  #panel_window {
    @extend %greeter_panel_window;

    menubar {
      @extend %greeter_panel_menubar;

      label,
      image {
        padding: 0 rem(6.7px, $sw: 1.0);
        color: $inverted_fg_color;
      }

      > menuitem { @extend %greeter_panel_menubar_menuitem; }

      menu menuitem { @extend %greeter_panel_menu_menuitem; }
    }
  }

  // main container
  #login_window,
  #restart_dialog,
  #shutdown_dialog {
    padding: 0;
    border-style: solid;
    border-width: 11px;
    // no need to be variant-specific, share the same asset instead
    border-image: -gtk-scaled(url("assets/osd-shadow.png"),
                              url("assets/osd-shadow@2.png"))
                  11 / 11px stretch;
    background-color: gtkopacity($inverted_dark_color, 0.9);
    color: $inverted_fg_color;
    box-shadow: none;

    button {
      padding: rem(9.3px, $sw: 1.0)
               rem(13.3px, $sw: 1.0)
               rem(10.7px, $sw: 1.0);
      color: $inverted_secondary_fg_color;
      &:hover,
      &:active { color: $inverted_fg_color; }
      &:disabled { color: $insensitive_inverted_fg_color; }
    }
  }

  @each $node_id_1, $node_id_2, $_color in
  ('#login_window', '#login_button', $suggested_color),
  ('#restart_dialog', '#restart_button', $destructive_color),
  ('#shutdown_dialog', '#shutdown_button', $destructive_color) {

    #{$node_id_1} button#{$node_id_2} {
      background-color: #{$_color};
      color: $secondary_selected_fg_color;
      &:hover {
        @extend %button_hover;
        background-color: #{$_color};
        color: $selected_fg_color;
      }
      &:active {
        @extend %button_active;
        background-color: $selected_bg_color;
        color: $selected_fg_color;
      }
      &:checked {
        background-color: mix($selected_fg_color, $_color, 20%);
      }
      &:disabled {
        @include button(insensitive, transparent,
                                     $insensitive_inverted_fg_color);
      }
    }
  }

  #login_window {
    button.combo {
      min-height: rem($widget_size);
      padding: 0 if($ref_weight < 1.0, 4px, 8px);
      border-image: -gtk-gradient(radial,
                                  center bottom, 0,
                                  center bottom, 0.5,
                                  to($outline_track_color),
                                  to(transparent))
                                  0 0 1 / 0 0 1px;
      color: $inverted_fg_color;
      font-weight: 500;
      &:hover,
      &:active {
        border-image: -gtk-gradient(radial,
                                    center bottom, 0,
                                    center bottom, 0.5,
                                    to($selected_bg_color),
                                    to(transparent))
                                    0 0 2 / 0 0 2px;
        color: $selected_fg_color;
      }
      &:disabled,
      &:checked:disabled {
        border-image: -gtk-gradient(radial,
                                    center bottom, 0,
                                    center bottom, 0.5,
                                    to($outline_track_color),
                                    to(transparent))
                                    0 0 1 / 0 0 1px;
        color: $insensitive_inverted_fg_color;
      }
    }

    entry { @extend %greeter_entry; }

    infobar.error { // notification revealer
      margin: 0 4px; // prevent unwanted overflow
      border: none;
      background-color: transparent;
      color: $error_color;
      font-weight: 700;
      font-size: 110%;
      transition: none; // transition causes visual glitches
    }
  }

  #content_frame { padding-bottom: 14px; }

  #buttonbox_frame {
    padding-top: 8px; // reserve gap between infobar and buttonbox
  }

  // non-CSD context menus
  window.background.popup > menu { @extend %non_csd_menu; }
}

// slick-greeter
$greeter_panel_height: 32px; // pixmap height
$greeter_panel_shadow: 11px; // pixmap shadow region

window.background.lightdm {
  // top-panel
  menubar {  // broken
    @extend %greeter_panel_menubar;
    padding-top: ($greeter_panel_height - $greeter_panel_shadow - $icon_size)
                 / 2;
    font-weight: 700;
    text-shadow: none;

    > menuitem {
      @extend %greeter_panel_menubar_menuitem;
      padding: 0 rem(6.7px, $sw: 1.0);

      label,
      image { color: $inverted_fg_color; }

      &:hover { box-shadow: inset 0 2px $selected_bg_color; }

      label { margin: 0 2px rem(1.3px, $sw: 1.0); }
    }
  }

  window.background.popup > menu {
    @extend %non_csd_menu;

    menuitem  { @extend %greeter_panel_menu_menuitem; }
  }

  button {
    &:not(.option-button):not(.toggle-button) {
      padding: rem(6.7px, $sw: 1.0);
      border-radius: 100px;
      -gtk-outline-radius: 100px;
    }

    &.flat.option-button { // session logo button
      padding: rem(6.7px, $sw: 1.0);
      border-radius: 100px;
      -gtk-outline-radius: 100px;
      color: $inverted_fg_color;

      image { opacity: 0.87; }

      &:hover,
      &:active {
        color: $selected_fg_color;

        image { opacity: 1.0; }
      }
    }

    &, // back arrow
    &.toggle-button { // session list rows
      @extend %button_flat_normal;
      padding: rem(10px) rem(13.3px);
      border-radius: 0;
      -gtk-outline-radius: 0;
      background-color: transparent;
      color: $inverted_fg_color;
      font-size: 110%;
      font-weight: 500;

      label { padding-bottom: rem(1.3px, $sw: 1.0); }

      image { opacity: 0.87; }

      &:hover,
      &:active,
      &.selected {
        image { opacity: 1.0; }
      }

      &:hover {
        @extend %button_flat_hover;
        background-color: transparent;
        color: $selected_fg_color;
      }
      &:active {
        @extend %button_flat_active;
        background-color: transparent;
        color: $selected_fg_color;
      }
    }

    &.toggle-button.selected { // selected row
      @extend %button_flat_normal;
      background-image: image($selected_bg_color);
      &, &:hover {
        color: $selected_fg_color;

        image { opacity: 1.0; }
      }
    }
  }

  entry,
  .lightdm-combo entry { @extend %greeter_entry; }

  entry:active { // for spinner
    -gtk-icon-source: -gtk-icontheme('process-working-symbolic');
    animation: spinner 1s linear infinite;
  }

  .lightdm-combo {
    border-radius: 0;
    background-color: transparent;
  }
}


// /********
//  * Nemo *
//  ********/

.nemo-desktop.nemo-canvas-item {
  @extend .nautilus-desktop.nautilus-canvas-item;
}

.nemo {
  &-canvas-item { @extend .nautilus-canvas-item; }

  &-list-dim-label { @extend .nautilus-list-dim-label; }
}

.nemo-window {
  // workaround for invisible text in rename entry (Eeleditable.entry)
  .nemo-window-pane scrolledwindow widget > widget.entry {
    &, &:focus {
      transition: none;

      &:selected { // FIXME: selection node doesn't work?
        @extend %selected_items;
      }
    }
  }

  infobar.error { // Administrative privileges
    label {
      font-size: 110%;
      font-weight: 700;
    }
  }

  // main tool-bar styling
  grid > box > box > toolbar.primary-toolbar {
    // draw bottom border and shadows
    border-bottom: 1px solid $borders_color;
    box-shadow: if($variant == light, $toolbar-shadow-light,
                                      $toolbar-shadow-dark);

    > button.flat.toggle { // 'back/forward'?
      min-height: $icon_size * 2.0;
      min-width: $icon_size * 2.0;
      padding: 0;
      border-radius: 2px;
      -gtk-outline-radius: 2px;
    }

    .linked.raised > button,
    .raised > button {
      // path-bar widget buttons
      &, &.text-button.toggle {
        min-height: rem(26.7px);
        min-width: rem(26.7px);
        padding-top: 0;
        padding-bottom: 0;
        border-radius: 2px;
        -gtk-outline-radius: 2px;

        > widget { padding: rem(4px) 0; } // GtkArrow?
      }

      &.image-button,
      &.image-button.toggle {
        min-height: $icon_size * 2.0;
        min-width: $icon_size * 2.0;
        padding: 0;
        border-radius: 2px;
        -gtk-outline-radius: 2px;
      }
    }

    // optional buttons
    .raised:not(.linked) > button {
      &:not(.text-button):not(.toggle) {
        min-height: $icon_size * 2.0;
        min-width: $icon_size * 2.0;
        padding: 0;
        border-radius: 2px;
        -gtk-outline-radius: 2px;
      }
    }

    // shrink height of entry node
    box.horizontal > widget > entry,
    button.text-button {
      padding-top: rem(5.3px);
      padding-bottom: rem(6.7px);
    }
  }

  // tweak notebook colour
  grid > paned > box > paned > box > notebook {
    &, > stack:not(:only-child) {
      background-color: $base_color;
    }
  }

  // remove double-border
  grid.vertical > paned.horizontal > box.vertical {
    > scrolledwindow.frame {
      border-width: 0;
    }
  }

  // force using flat-style on bottom bar
  grid.vertical > widget {
    background-color: $secondary_dark_color;
    box-shadow: if($variant=='light', $inline-shadow-light,
                                      $inline-shadow-dark);

    > box { padding: rem(2.7px); }

    > box > button.image-button {
      @extend %button_flat_normal;
      min-width: rem(13.3px);
      min-height: rem(29.3px);
      border-radius: 2px;
      -gtk-outline-radius: 2px;
      padding: 0 rem(10px) 0;
      border-image: -gtk-gradient(radial,
                                  center bottom, 0,
                                  center bottom, 0.001,
                                  to($outline_track_color),
                                  to(transparent))
                                  0 0 0 / 0 0 0px;
      background-color: transparent;
      color: $secondary_fg_color;
      &:hover {
        @extend %button_flat_hover;
        border-image: none;
        background-color: transparent;
        color: $fg_color;
      }
      &:checked {
        @extend %button_flat_checked;
        border-image: -gtk-gradient(radial,
                                    center bottom, 0,
                                    center bottom, 0.5,
                                    to($selected_bg_color),
                                    to(transparent))
                                    0 0 2 / 0 0 2px;
        background-color: transparent;
        color: $fg_color;
        &:disabled {
          @extend %button_flat_checked_disabled;
          border-image: none;
          background-color: transparent;
          color: $insensitive_fg_color;
        }
      }
      &:disabled {
        @extend %button_flat_disabled;
        border-image: none;
        background-color: transparent;
        color: $insensitive_secondary_fg_color;
      }
    }

    box > separator.vertical { // remove separator
      min-width: 0;
      color: transparent;
      background-color: transparent;
    }
  }
}


// /************
//  * Lollypop *
//  ************/

// header grid?
paned.horizontal > paned.horizontal stack grid.vertical > grid.horizontal {
  button.image-button {
    &, &.toggle {
      border-radius: 2px;
      -gtk-outline-radius: 2px;
    }
  }
}

// playlists styling
row.trackrow {
  &, &playing {
    // lollypop can not understand outer marigns
    button.image-button:not(.text-button),
    .track-menu-button { // back to square button
      &, &.toggle { // back to square button
        margin: 0;
        border-radius: 2px;
        -gtk-outline-radius: 2px;
      }
    }
  }
}

// Track menu GtkPopover
// parent container of GtkWidgets 'Ratings' and 'Heart'
grid.popover-rating-loved-grid {
  // tweak bottom margin
  margin-bottom: if($ref_weight < 1.0, calc(12px + 0.35rem),
                                       calc(12px + 0.5rem));
}


// /***************************
//  * Cinnamon-Control-Center *
//  ***************************/

window.background:not(.csd) > box.vertical {
  > stack > scrolledwindow > viewport,
  > scrolledwindow > viewport {
    iconview {
      &, &.view {
        background-color: transparent;
        &:selected {
          @extend %selected_items;

          label { color: $selected_fg_color; }
        }
      }
    }

    box.vertical > toolbar {
      border: none;
      background-color: $bg_color;
      box-shadow: none;

      *:not(button) > label {
        padding: rem(5.3px, $sw: 1.0);
        color: $tertiary_fg_color;
      }
    }

    box.vertical > list {
      &, > row {
        background-image: none;
        background-color: $base_color;
        transition-duration: 0s;
      }

      > row {
        &:hover,
        &:active { // unset hover/active effects
          background-image: none;
          background-color: transparent;
          transition-duration: 0s;
          animation: none;
        }
        &:selected { // use -image instead for >= 3.6.x
          background-image: image($selected_bg_color);
          color: $selected_fg_color;
        }
      }
    }
  }
}

// add extra vertical margins for weird switch node allocation
widget box.horizontal > widget + box.horizontal {
  switch  { margin: rem(5.3px) 0; }
}


// /************************
//  * Cinnamon-Screensaver *
//  ************************/

.csstage {
  .unlockbox {
    color: $inverted_fg_color;
    font-size: 110%;
    font-weight: 400;
  }

  .clock {
    color: $inverted_fg_color;
    font-size: rem(112px, $sw: 1.0);
    font-weight: 300;
  }

  .toppanel {
    border: none;
    color: $inverted_fg_color;
    background-color: transparent;
  }

  .audiopanel,
  .infopanel { // OSDs placed at top-left/right corners
    border: none;
    background-color: gtkopacity($inverted_dark_color, 0.9);
    box-shadow: $z-depth-1;

    &:not(.infopanel) { border-radius: 0 0 2px 0; }
    &:not(.audiopanel) { border-radius: 0 0 0 2px; }
  }

  .notificationwidget,
  .powerwidget {
    padding: 6px;
    color: $inverted_fg_color;
    background-color: transparent;
    font-size: 100%;
    font-weight: 500;
  }

  .auth-message {
    color: $error_color;
    font-size: 90%;
    font-weight: 700;
  }

  .caps-message {
    color: $warning_color;
    font-size: 90%;
    font-weight: 700;
  }

  .framedimage { // avatar?
    border-radius: 2px;
    border: none;
    background-color: gtkopacity($inverted_fg_color, 0.12);
  }

  .passwordentry {
    @include entry(flat-normal, $c: $inverted_fg_color);
    border-radius: 0;
    caret-color: inherit;
    font-family: monospace;
    &:focus {
      @include entry(flat-focus, $c: $inverted_fg_color);
      caret-color: inherit;
    }
    &:disabled { @include entry(flat-insensitive, $c: $inverted_fg_color); }
    &:backdrop { // for alt-text keyboard layout?
      color: $selected_bg_color;
    }

    image.left {
      margin-right: 8px;
      color: inherit;
    }
  }

  .transparentbutton { // = 'unlock'/'switch-user' button
    @extend %button_flat_normal;
    border: none;
    background-color: transparent;
    &:not(:active):not(:disabled):not(hover) {
      background-color: transparent;
      color: $secondary_accent_color;
    }
    &:hover {
      @extend %button_flat_hover;
      background-color: transparent;
      color: $accent_color;
    }
    &:active {
      @extend %button_flat_active;
      border-image: none;
      background-color: transparent;
      color: $accent_color;
      box-shadow: none;
    }
    &:checked {
      @extend %button_flat_checked;
      border-image: none;
      background-color: transparent;
      color: $accent_color;
      box-shadow: none;
    }
    &:disabled {
      @extend %button_flat_disabled;
      background-color: gtkopacity($inverted_secondary_fg_color, 0.12);
      color: gtkopacity($inverted_secondary_fg_color, 0.4);

      label,
      image { color: inherit; }
    }
  }

  .volumeslider {
    min-height: 24px;
    min-width: 100px;
    padding: 3px 0px;
    background-color: gtkopacity($inverted_fg_color, 0.2);
    color: $success_color;
    &:disabled { background-color: gtkopacity($success_color, 0.2); }

    // slider { // FIXME: what's this?
    //   min-height: 24px;
    //   min-width: 4px;
    //   margin: -9px;
    // }
  }

  .trackname {
    font-size: 90%;
    color: $inverted_secondary_fg_color;
    background-image: none;
    background-color: transparent;
  }

  .albumartist {
    font-size: 80%;
    color: $insensitive_inverted_fg_color;
    background-image: none;
    background-color: transparent;
  }

  viewport {
    &,
    &.frame {
      border-style: none;
      background-color: transparent;
      background-image: none;
    }
  }
}


// /*********
//  * XFce4 *
//  *********/

.XfceHeading {
  border: 0 none transparent;
  background-color: $bg_color;
  color: $fg_color;
}

.xfce4-panel {
  background-color: $panel_bg_color;
  color: $inverted_fg_color;
  font-weight: 700;
  text-shadow: none;
  -gtk-icon-shadow: none;

  &, // unset borders
  frame > border { border: 0 none transparent; }

  // dashed outline indicator?
  // default -> 1px dashed #ff0000;
  &.marching-ants { border: 1px dashed $destructive_color; }

  button {
    padding: 0 4px;
    border: none;
    border-radius: 0;
    background-color: transparent;
    background-image: none;
    color: $inverted_fg_color;
    font-weight: 700;
    transition: none;
    &:hover {
      background-color: transparent;
      background-image: none;
      color: $selected_fg_color;
      box-shadow: inset 0 -2px $outline_track_color;
      transition: none;
    }
    &:active,
    &:checked,
    &:hover:checked,
    &:disabled:checked { // 'checked' = 'active'
      background-color: transparent;
      background-image: none;
      color: $selected_fg_color;
      box-shadow: inset 0 -2px $selected_bg_color;
      transition: none;
      animation: none;
    }
    &:active {
      &, &:hover { background-color: gtkopacity($inverted_fg_color, 0.12); }
    }
  }

  menu {
    font-weight: 400; // for enforcing regular weight
    text-shadow: none;
    -gtk-icon-effect: none;
  }
}

TopMenuAppMenuBar {
  background-color: $panel_bg_color; // do not use transparent
  color: $inverted_fg_color;
  box-shadow: none;

  > menuitem {
    color: $inverted_fg_color;
    background-color: transparent;
    &:hover {
      color: $selected_fg_color;
      box-shadow: inset 0 -2px $selected_bg_color;
      transition: none;
    }
  }
}


// /**********
//  * Thunar *
//  **********/

window.thunar {
  toolbar#location-toolbar {
    border-bottom: 1px solid $borders_color;

    // FIXME: need to unset for weird allocation height
    entry { min-height: 0; }
  }

  notebook {
    // hide unneeded border
    stack > scrolledwindow.frame.standard-view { border-top-width: 0; }

    // an allocation height of label node affects to close button's
    // image height (it's quite weird).
    header.top tab.reorderable-page > box > label { min-height: 0; }
  }
}


// /**************
//  * FeedReader *
//  **************/

window.background > paned.titlebar > headerbar.titlebar {
  button.flat {
    // FIXME: when developer will use .image-button class?
    &:not(.titlebutton):not(.image-button):not(.text-button):not(.toggle) {
      min-width: $icon_size - 2px;
      min-height: $icon_size - 2px;
      margin: rem(5.3px + 2px) 0;
      padding: 0 rem(($widget_size - $icon_size - 2px) / 2);
    }
  }
}

// left-paned haederbar
paned.headerbar_pane.titlebar > headerbar.header_right.titlebar {
  > box.linked.raised > button.toggle { // should be .text-button
    // back to square buttons
    border-radius: 2px;
    -gtk-outline-radius: 2px;
  }
}

// article-list
overlay.article-list > stack {
  > scrolledwindow > viewport.frame > list {
    background-color: $bg_color;

    > row.activatable {
      &:hover { background-color: gtkalpha(currentColor, 0.12); }
      &:selected {
        &,
        &:focus {
          background-color: gtkopacity($selected_bg_color, 0.25);
          &:dir(ltr) { box-shadow: inset 4px 0 $selected_bg_color; }
          &:dir(rtl) { box-shadow: inset -4px 0 $selected_bg_color; }

          label {
            &,
            &.headline-read,
            &.preview { color: $fg_color; }
          }
        }
      }
    }
  }
}

revealer > widget > headerbar.imageOverlay.titlebar {
  > box > button.close.titlebutton { // non-CSD inline-headerbar
    min-width: $icon_size * 1.5;
    min-height: $icon_size * 1.5;
    padding: if($ref_weight < 1.0,
             rem(($widget_size - $icon_size * 1.5 - 2px) / 2),
             rem(($widget_size - $icon_size * 1.5) / 2));
  }
}


// /************
//  * Synaptic *
//  ************/

window > box.vertical > box.horizontal {
  > toolbar {
    background-color: transparent;
    box-shadow: none;

    toolitem > box {
      label,
      entry {
        min-height: rem(13.3px);
        padding-top: rem(1.3px);
        padding-bottom: rem(1.3px);
        font-size: 90%;
      }

      > label { color: $insensitive_fg_color; }
    }
  }

  > widget { background-color: transparent; }
}


// /**********************
//  * Eclipse/SWT (neon) *
//  **********************/

window.background:not(.solid-csd) > box.vertical {
  > scrolledwindow widget > toolbar {
    box-shadow: none; // remove inline-shadows

    button { // hard-coded crazy zero-padding
      min-height: if($ref_weight < 1.0, $icon_size * 1.5, $icon_size * 1.75);
      min-width: if($ref_weight < 1.0, $icon_size * 1.5, $icon_size * 1.75);
      margin: 2px 0;
      border-radius: 2px;
      -gtk-outline-radius: 2px;
    }

    separator { margin: 2px 0; }
  }

  > scrolledwindow > widget > widget {
    border-width: 0 0 1px;
    border-style: none none solid;
    border-color: transparent transparent $solid_light_borders_color;
  }

  scrolledwindow widget > widget > entry,
  scrolledwindow widget > widget > combobox entry {
    // min-height is hard-coded
    padding-top: 0;
    padding-bottom: 0;
  }

  widget > frame > widget > widget > scrolledwindow > textview {
    // override hard-coded crazy rgb(0,0,0)
    text { background-image: image($base_color); }
  }

  scrolledwindow widget > widget {
    > checkbutton check,
    > radiobutton radio { // disable ripple animations
      &:hover,
      &:active,
      &:hover:checked,
      &:hover:indeterminate { animation: none; }
    }
  }
}


// /*************
//  * Gnome-Mpv *
//  *************/

// control-bar styling
.background.csd > box.vertical > box.background.horizontal,
.background.solid-csd > box.vertical > box.background.horizontal {
  padding: rem(2.7px);

  button {
    min-width: if($ref_weight < 1.0, $icon_size * 1.8,
                                     $widget_size);
    min-height: if($ref_weight < 1.0, $icon_size * 1.8,
                                      $widget_size);
    margin-left: rem(2.7px);
    margin-right: rem(2.7px);
    padding: 0;
  }

  scale {
    margin-left: rem(2.7px);
    margin-right: rem(2.7px);
  }

  scale > value.bottom { color: $fg_color; } // use standard foreground-colour

  // stop using 'with-marks' sliders
  scale contents > trough > slider {
    min-height: rem(20px, $sw: 1.0);
    min-width: rem(20px, $sw: 1.0);
    margin: rem(-9px - 0.5px, $sw: 1.0);
    background-repeat: no-repeat;
    background-position: center;
    &:not(:hover):not(:active) { background-size: $scale; }

    @if $variant==light {
      background-image: -gtk-scaled(url('assets/slider.png'),
                                    url('assets/slider@2.png'));
      &:hover {
        margin: rem(-9px - 0.5px, $sw: 1.0);
        background-image: -gtk-scaled(url('assets/slider.png'),
                                      url('assets/slider@2.png'));
        background-size: 100%;
      }
      &:active {
        margin: rem(-9px - 0.5px, $sw: 1.0);
        background-image: -gtk-scaled(url('assets/slider-active.png'),
                                      url('assets/slider-active@2.png'));
      }
      &:disabled {
        background-image: -gtk-scaled(url('assets/slider-insensitive.png'),
                                      url('assets/slider-insensitive@2.png'));
      }
    }

    @else {
      background-image: -gtk-scaled(url('assets/slider-dark.png'),
                                    url('assets/slider-dark@2.png'));
      &:hover {
        margin: rem(-9px - 0.5px, $sw: 1.0);
        background-image: -gtk-scaled(url('assets/slider-dark.png'),
                                      url('assets/slider-dark@2.png'));
        background-size: 100%;
      }
      &:active {
        margin: rem(-9px - 0.5px, $sw: 1.0);
        background-image: -gtk-scaled(url('assets/slider-active-dark.png'),
                                      url('assets/slider-active-dark@2.png'));
      }
      &:disabled {
        background-image: -gtk-scaled(url('assets/slider-insensitive-dark.png'),
                                      url('assets/slider-insensitive-dark@2.png'));
      }
    }
  }
}


// /*******************
//  * Firefox Quantum *
//  *******************/

%_html_button_spacing {
  min-width: unset; // do not set min-width/height
  min-height: unset;
  padding: if($ref_weight < 1.0, 4px 8px 5px, 7px 11px 8px);
}

%_html_entry_spacing {
  min-width: if($ref_weight < 1.0, 24px, 24px + 4px);
  min-height: if($ref_weight < 1.0, 24px, 24px + 4px);
  padding: if($ref_weight < 1.0, 0 4px, 0 7px);
}

%browser_csd_titlebutton {
  // define global titlebutton class sizing
  margin: 0; // unset margins
  padding: 0;
  background-position: center center;
  background-repeat: no-repeat;
  color: transparent; // hide stock icons

  @each $_class, $_suffix1 in ('close', '-close'),
                              ('minimize', '-minimize'),
                              ('maximize', '-maximize') {
    @each $_pseudo, $_suffix2 in ('', ''),
                                 (':hover', '-active'),
                                 (':active', '-active'),
                                 (':backdrop', '-backdrop') {
      &.#{$_class}#{$_pseudo} {
        background-image:
          -gtk-scaled(
            url("assets/window#{$_suffix1}#{$_suffix2}.png"),
            url("assets/window#{$_suffix1}#{$_suffix2}@2.png"));
      }
    }
  }

  &.close {
    &:hover { background-color: $destructive_color; }
    &:active { background-color: $selected_bg_color; }
    &:backdrop:hover {
      background-color: gtkopacity($destructive_color, 0.4);
    }
  }

  &:not(.close) {
    &:hover { background-color: gtkopacity($inverted_fg_color, 0.12); }
    &:active { background-color: gtkopacity($inverted_fg_color, 0.25); }
    &:backdrop:hover {
      background-color: gtkopacity($inverted_fg_color, 0.12 * 0.4);
    }
  }
}

%browser_maxd_csd_titlebutton {
  @each $_pseudo, $_suffix2 in ('', ''),
                               (':hover', '-active'),
                               (':active', '-active'),
                               (':backdrop', '-backdrop') {
    &#{$_pseudo} {
      background-image:
        -gtk-scaled(url("assets/window-unmaximize#{$_suffix2}.png"),
                    url("assets/window-unmaximize#{$_suffix2}@2.png"));
    }
  }
}

#MozillaGtkWidget.background {
  headerbar.titlebar { // >= nightly 60.0a1(2018-02-02)
    // FIXME: no backdrop state, no maximized state, bullshit...
    padding: 0 if($ref_weight < 1.0, (28px - $icon_size * 1.25) / 2,
                                     (28px - $icon_size * 1.5) / 2);

    &.default-decoration button.titlebutton {
      @extend %browser_csd_titlebutton;
      min-width: if($ref_weight < 1.0, $icon_size * 1.25,
                                       $icon_size * 1.5);
      min-height: if($ref_weight < 1.0, $icon_size * 1.25,
                                       $icon_size * 1.5);
    }
  }

  menubar > menuitem {
    color: $inverted_secondary_fg_color;
    &:hover { color: $inverted_fg_color; }
    &:disabled { color: $insensitive_inverted_fg_color; }
  }

  > window.background > menu { // context-menus
    border: unset; // hide ugly double borders
    background-color: $secondary_base_color;

    // revert to standard separators
    > separator {
      padding: if($ref_weight < 1.0, 2px, 3px) // non-scalable units
               0
               if($ref_weight < 1.0, 3px, 4px);
      border-top: // use opaque
        if($ref_weight < 1.0, 2px, 3px) solid $secondary_base_color;
      border-bottom:
        if($ref_weight < 1.0, 3px, 4px) solid $secondary_base_color;
      background-color: $solid_light_borders_color;
    }

    > menuitem > radio:checked {
      -gtk-icon-source: -gtk-scaled(
                        url("assets/radio-checked#{$asset_suffix}.png"),
                        url("assets/radio-checked#{$asset_suffix}@2.png"));
    }
  }

  > widget {
    // 'PageInfo' window's ViewGroup > radio?
    > radiobutton,
    > checkbutton {
      &:focus { outline-width: 0; } // hide outlines
    }

    border { border-color: $solid_light_borders_color; }

    separator { background-color: $solid_light_borders_color; }

    > scrolledwindow > textview text {
      &:selected { @extend %selected_items; }
    }

    > button {
      &, &.combo {
        > button { // enforce fallback buttons inside the HTML pages
          @extend %button_fallback_normal;
          &:hover { @extend %button_fallback_hover; }
          &:active,
          &:checked { @extend %button_fallback_active; }
          &:disabled { @extend %button_fallback_insensitive; }
          &:checked:disabled {
            @extend %button_fallback_checked_insensitive;
          }
        }
      }

      &.combo, // generic button and combo spacing
      & { @extend %_html_button_spacing; }

      // toolbar combo buttons in 'downloads' sub-window
      &:not(.combo) > button { @extend %_html_button_spacing; }
    }

    > entry {
      @extend %_html_entry_spacing;
      // enforce fallback entries inside the HTML pages
      @extend %entry_fallback_normal;
      border-radius: 2px;
      &:focus { @extend %entry_fallback_focus; }
      &:disabled { @extend %entry_fallback_insensitive; }
    }

    > check,
    > radio { // unset all
      min-width: $icon_size;
      min-height: $icon_size;
      margin: 0;
      padding: 0;
      transition: none;
    }
  }
}


// /*************
//  * Wireshark *
//  *************/

window.background {
  > box.vertical > toolbar:not(.primary-toolbar).horizontal {
    border-bottom: 1px solid $borders_color;
    box-shadow: none; // hide fake-shadows
  }

  paned > notebook > stack > scrolledwindow.frame > widget.view {
    // transition causes missing 'selected-items'
    background-image: none;
    transition: none;
    animation: none;
  }
}


// /**************
//  * Mate-Panel *
//  **************/

// Most parts are themed in Gnome-panel section
#PanelWidget,
#PanelPlug,
#PanelApplet,
PanelToplevel.background {
  // Always use dark-color of dark variant
  color: $inverted_fg_color;
  background-color: $panel_bg_color;
  box-shadow: none;
}

PanelSeparator {
  border-width: 0;
  background: none;
  background-image: none;
  color: $panel_separator_color;
}

@each $layout, $size, $dir in (horizontal, 7px 14px, right),
                              (vertical, 14px 7px, bottom) {
  // a grip
  PanelToplevel.#{$layout} MatePanelAppletFrameDBus {
    background-image: linear-gradient(to #{$dir},
                        transparent 2px,
                        $panel_separator_color 2px,
                        $panel_separator_color 3px,
                        transparent 3px,
                        transparent 4px,
                        $panel_separator_color 4px,
                        $panel_separator_color 5px,
                        transparent 5px,
                        transparent 7px);
    background-repeat: no-repeat;
    background-size: #{$size};

    @if $layout == horizontal {
      &:dir(ltr) { background-position: left center; }
      &:dir(rtl) { background-position: right center; }
    }
    @else if $layout == vertical { background-position: center top; }
  }
}

// 'hide' arrow buttons
PanelToplevel.mate-panel-menu-bar > grid.horizontal > button {
  @extend %button_flat_normal;
  min-height: 4px;
  min-width: 4px;
  padding: 0;
  border-radius: 0;
  border-style: solid;
  border-color: gtkopacity($inverted_secondary_fg_color, 0.12 * 0.55);
  -gtk-outline-radius: 0;
  background-color: transparent;
  color: $inverted_fg_color;
  &:hover {
    @extend %button_flat_hover;
    background-color: transparent;
    color: $selected_fg_color;
  }
  &:active {
    @extend %button_flat_active;
    background-color: transparent;
    color: $selected_fg_color;
  }
  &:disabled {
    @extend %button_flat_disabled;
    color: $insensitive_inverted_fg_color;
  }
  &:checked {
    @extend %button_flat_checked;
    background-color: transparent;
    color: $selected_fg_color;
  }

  > image {
    padding: 0 rem(4px, $sw: 1.0);
  }

  &:first-child {
    &:dir(ltr) { border-width: 0 1px 0 0; }
    &:dir(rtl) { border-width: 0 0 0 1px; }
  }
  &:not(:first-child) {
    &:dir(ltr) { border-width: 0 0 0 1px; }
    &:dir(rtl) { border-width: 0 1px 0 0; }
  }
}

.mate-panel-menu-bar menubar,
#PanelApplet-window-menu-applet-button {
  background-color: transparent;

  // same value with Gnome-panel
  > menuitem { padding: 0 rem(4px, $sw: 1.0); }
}

// Brisk-Menu applet
.mate-panel-menu-bar button.flat.toggle {
  &.brisk-button {
    padding: 0 rem(4px, $sw: 1.0);
    border-radius: 0;
    -gtk-outline-radius: 0;
    background-image: none;
    background-color: transparent;
    color: $inverted_fg_color;
    font-weight: 700;
    &:hover {
      background-image: none;
      color: $selected_fg_color;
      box-shadow: inset 0 -2px $outline_track_color;
    }
    &:active { animation: none; }
    &:checked {
      background-image: none;
      color: $selected_fg_color;
      box-shadow: inset 0 -2px $selected_bg_color;
    }
  }

  // vertical panel mode?
  &.brisk-button-vertical {
    padding: 0;
    &:hover { box-shadow: inset 2px 0 $outline_track_color; }
    &:checked { box-shadow: inset 2px 0 $selected_bg_color; }
  }
}

.brisk-menu {
  border-top: 1px solid $menu_highlight_color;

  entry { margin: rem(4px); } // search-entry

  box.horizontal scrolledwindow { // right-pane
    &:dir(ltr) { margin: rem(4px) rem(4px) rem(4px) 0; }
    &:dir(rtl) { margin: rem(4px) 0 rem(4px) rem(4px); }
  }

  .categories-list { // left-pane
    &:dir(ltr) { margin: rem(4px) 0 rem(4px) rem(4px); }
    &:dir(rtl) { margin: rem(4px) rem(4px) rem(4px) 0; }

    button.flat {
      padding-top: unset;
      padding-bottom: unset;
      border-radius: 0; // remove roundness
      -gtk-outline-radius: 0;
      font-weight: 500;
      transition-duration: 0.1s; // shorter duration
      // almost covers :hover pseudo-class
      &:checked {
        background-color: transparent;
        color: $selected_bg_color;
      }

      image { padding: rem(8px) 0; }
      // for finer base-lines
      label { padding-bottom: rem(0.7px); }
    }
  }

  // hide separator above session-buttons
  box.vertical > box.horizontal > box.vertical > separator.horizontal {
    min-height: 0;
    background-color: transparent;
  }

  .apps-list, // legacy
  list.content-view.view { // right-pane
    background-color: $base_color;

    row.activatable {
      padding: 0;
      background-image: none;
      transition-duration: 0s;

      > button.flat {
        padding-top: unset;
        padding-bottom: unset;
        border-radius: 0; // remove roundness
        -gtk-outline-radius: 0;
        font-weight: 400;
        transition-duration: 0s; // needs quicker response

        // set vertical padding with icon's padding
        > box.horizontal > image { padding: rem(5.3px) 0; }
      }
    }
  }
}

.mate-panel-applet-slider {
  background-color: transparent;

  frame { // draw actual widget
    border-width: 1px;
    border-style: solid;
    border-color: $menu_highlight_color transparent transparent;
    border-radius: 2px;
    background-color: $secondary_base_color;

    // unset borders
    *,
    > border { border: unset; }
  }
}


// /*****************
//  * Mate-Terminal *
//  *****************/

.mate-terminal {
  notebook > header.top { // show drop-shadows
    @extend %ssd_notebook_shadow;
  }
}


// /********
//  * Caja *
//  ********/

.caja {
  &-canvas-item { @extend .nautilus-canvas-item; }

  &-list-dim-label { @extend .nautilus-list-dim-label; }
}

.caja-desktop { // desktop icon-grid styling
  &.caja-canvas-item { @extend .nautilus-desktop.nautilus-canvas-item; }

  > widget.entry { // = EelEditableLabel.entry
    &, &:focus {
      transition: none;

      &:selected { // FIXME: selection node doesn't work?
        @extend %selected_items;
      }
    }
  }
}

.caja-navigation-window {
  // side-panel styling
  .caja-side-pane {
    scrolledwindow {
      @extend %sidebar_template;

      treeview.view {
        background-color: transparent;
        // font-weight: 500;
        &:selected { @extend %selected_items; }
      }
    }

    notebook {
      border-top: 1px solid $borders_color;

      .frame { border: none; }
    }

    button.flat:last-child { // 'close' button on header
      min-width: $icon_size;
      min-height: $icon_size;
      padding: rem(10.7px);
      border-radius: 2px;
      -gtk-outline-radius: 2px;
    }
  }

  // main toolbar styling
  toolbar.primary-toolbar {
    border-bottom: 1px solid $borders_color;
    box-shadow: if($variant == light, $toolbar-shadow-light,
                                      $toolbar-shadow-dark);

    button { // uniform button sizes
      min-width: $icon_size * 1.5;
      min-height: $icon_size * 1.5;
      padding: rem(4px);
    }
  }

  // path-bar styling
  .caja-pathbar {
    button {
      &:first-child { // remove meaningless gaps
        &:dir(ltr) { margin-right: -2px; }
        &:dir(rtl) { margin-left: -2px; }
      }
      &:not(:first-child):not(:last-child) {
        margin: 0 -2px;
      }
      &:last-child {
        &:dir(ltr) { margin-left: -2px; }
        &:dir(rtl) { margin-right: -2px; }
      }

      &.toggle,
      &.image-button,
      &.text-button,
      &.slider-button { // enforce square buttons
        border-radius: 2px;
        -gtk-outline-radius: 2px;
      }

      &, &.slider-button { // use linked-array button styling
        @extend %button_array;
      }
    }
  }

  button.image-button.toggle { // most-left toggle button in path-bar pane
    @include button(flat-normal);
    border-radius: 2px;
    -gtk-outline-radius: 2px;
    &:hover { @include button(flat-hover); }
    &:active { @include button(flat-active); }
    &:disabled { @include button(flat-insensitive); }
    &:checked { // use underline-indicator
      @include button(flat-checked);
      border-radius: 0;
      -gtk-outline-radius: 0;
      background-image: none;
      background-color: transparent;
      box-shadow: inset 0 -2px $selected_bg_color;
    }
  }

  .caja-notebook { // remove lateral borders
    &, .frame {
      border-width: 1px 0 1px;
    }

    > header.top { // revive top-border when tabs are shown
      border-top: 1px solid $borders_color;
      background-color: $secondary_dark_color;
      box-shadow: if($variant == light, $inline-shadow-light,
                                        $inline-shadow-dark);
    }
  }

  statusbar {
    margin: 0 -10px; // hide weird lateral gaps
    padding: 0 rem(6.7px);
    background-color: $secondary_dark_color;
    box-shadow: if($variant == light, $inline-shadow-light,
                                      $inline-shadow-dark);
  }

  // workaround for invisible text in rename entry
  scrolledwindow widget > widget.entry {
    &, &:focus {
      transition: none;

      &:selected { // FIXME: selection node doesn't work?
        @extend %selected_items;
      }
    }
  }
}

#caja-extra-view-widget {
  border-bottom: 1px solid $borders_color;
  background-color: $bg_color; // needs overriding

  > box > box > label { font-weight: 700; }
}


// /***********************
//  * Mate-Control-Center *
//  ***********************/

// almost out of control, and looks ugly
window#MyControlCenter > frame > box.horizontal {
  > widget > scrolledwindow.frame {
    border: none;
    // draw pane-separator with borders
    // FIXME: rendering quality is quite poor
    &:dir(ltr) { border-left: 1px solid $solid_light_borders_color; }
    &:dir(rtl) { border-right: 1px solid $solid_light_borders_color; }

    > widget.view { // content-view
      all: unset;
      background-color: $bg_color; // does not work
    }
  }
}


// /**************
//  * Mate-Tweak *
//  **************/

.background:not(.csd) > box.horizontal {
  > notebook { // right-pane
    // remove unwanted frames/borders
    &.frame {
      border: none;

      > stack {
        border-width: 1px;
        border-style: solid;
        border-color: $bg_color;
        box-shadow: none;
        &:dir(ltr) { border-left-color: $paned_borders_color; }
        &:dir(rtl) { border-right-color: $paned_borders_color; }
      }
    }
  }
}


// /*******
//  * Eom *
//  *******/

.eom-window {
  statusbar { // always use dark-variant
    margin: 0 -10px; // hide weird lateral gaps
    padding: 0 rem(6.7px);
    background-color: $inverted_bg_color;
    color: $inverted_fg_color;
    box-shadow: $inline-shadow-dark;
  }

  // toolbar.horizontal { // when will devs implement symbolic-icons?
  //   background-color: $inverted_bg_color;
  //   color: $inverted_secondary_fg_color;
  //   box-shadow: $toolbar-shadow-dark;

  //   button {
  //     background-color: transparent;
  //     color: $inverted_secondary_fg_color;
  //     &:hover,
  //     &:active,
  //     &:checked { color: $inverted_fg_color; }
  //     &:disabled { color: $insensitive_inverted_fg_color; }
  //   }
  // }
}


// /*********
//  * Pluma *
//  *********/

.pluma-window {
  paned.horizontal notebook {
    > header.top { // revive top-border when tabs are shown
      border-top: 1px solid $borders_color;
      background-color: $secondary_dark_color;
      box-shadow: if($variant == light, $inline-shadow-light,
                                        $inline-shadow-dark);
    }
  }

  statusbar {
    margin: 0 -10px; // hide weird lateral gaps
    padding: 0 rem(6.7px);
    background-color: $secondary_dark_color;
    box-shadow: if($variant == light, $inline-shadow-light,
                                      $inline-shadow-dark);

    frame,
    .frame { border-style: none; }
  }

  // side-pane styling
  paned.horizontal box.vertical notebook {
    &.frame { border-style: solid none; }
  }

  // print-preview styling
  .pluma-print-preview toolbar.horizontal {
    border-width: 1px 0;
    border-style: solid none;
    border-color: $borders_color transparent;
    background-color: $secondary_dark_color;
    box-shadow: if($variant == light, $inline-shadow-light,
                                      $inline-shadow-dark);
  }
}


// /*****************
//  * Atril/Xreader *
//  *****************/

.atril-window,
.xreader-window {
  scrolledwindow.frame {
    border-style: solid none none;

    > .view { // = evview?
      transition: none;
      &:selected,
      &:active { @extend %selected_items; }
    }
  }

  toolbar > toolbutton button.flat.image-button { // back to square buttons
    border-radius: 2px;
    -gtk-outline-radius: 2px;
  }

  // 'presentation' mode fullscreen?
  &.fullscreen.background > box.vertical {
    background-color: black; // turn to pitch-black
    transition-duration: 0s; // unset transitions

    // use opaque borders
    > toolbar:not(.primary-toolbar).horizontal {
      border-bottom-color: $solid_light_borders_color;
    }

    // revert to standard backgrounds
    > paned.horizontal { background-color: $bg_color; }
  }
}


// /****************
//  * Libre-Office *
//  ****************/

window.background:not(.solid-csd) {
  // for 'Notebookbar' toolbar
  > notebook:not(.frame) {
    border: 0 none transparent; // unset borders
    background-color: $base_color;

    > stack {
      border: none;
      box-shadow: none;
    }

    > header.top {
      border: 0 none transparent; // unset borders
      background-color: $bg_color;
      box-shadow: $toolbar-shadow-light,
                  inset 0 -1px $borders_color;
      @if $variant = 'dark' {
        box-shadow: $toolbar-shadow-dark,
                    inset 0 -1px $borders_color;
      }

      tabs {
        &, > tab { background-color: transparent; }
      }
    }
  }
}


// /*************************
//  * Mate-MediaControl-OSD *
//  *************************/

// OSDs are much blurred?
MsdOsdWindow {
  &.background.osd {
    border-radius: 2px;
    border: 1px solid gtkopacity($inverted_dark_color, 0.9);
    background-color: gtkopacity($inverted_dark_color, 0.9);
    box-shadow: none;

    // FIXME: seems images have inverted fore/back colours?
    image { color: $inverted_fg_color; }

    .trough {
      border-radius: 0;
      border: none;
      background-color: gtkopacity($inverted_fg_color, 0.2);
    }

    .progressbar {
      border-radius: 0;
      border: none;
      background-color: $success_color;
    }
  }
}


// /***************************
//  * Mate-Notification-Slate *
//  ***************************/

// use budgie-style OSDs
.slate-notification {
  &-window {
    @extend %budgie_notification_window;

    .drop-shadow {
      margin: 4px 6px 10px; // enlarge the shadow area
      border-radius: 2px;
    }
  }

  @extend %budgie_notification;
  border-radius: 2px;
}


// /************
//  * Inkscape *
//  ************/

// 1st-row toolbar
#CommandsToolbar {
  button.flat.image-button {
    border-radius: 2px;
    -gtk-outline-radius: 2px;
  }
}

// 2nd-row toolbars
box#AuxToolbox {
  border-top: 1px solid $borders_color;

  toolbar {
    min-height: rem(37.3px, $sw: 1.0);
    border: none;
    box-shadow: none;

    button.flat.image-button {
      border-radius: 2px;
      -gtk-outline-radius: 2px;
    }
  }

  box#StyleSwatch { // keep the similar height vs GtkToolBar
    margin: rem(-2.7px) 0;

    label { font-size: if($ref_weight < 1.0, 90%, 100%); }
  }
}

// left/right-side, vertical toolbars
#SnapToolbar,
#ToolToolbar {
  > button,
  > toolitem > button,
  > toolbutton > button { // revert to rectangular buttons
    min-width: rem($icon_size * 2.5);
    min-height: rem($icon_size * 2.5);
    margin: 0;
    padding: 0;
    border-radius: 2px;
    -gtk-outline-radius: 2px;
    &:checked {
      @include button(flat-checked);
      border-image: none;
    }
  }
}

// scrolled colour-palette
#PreviewHolderScroller > viewport.frame {
  padding: 1px 0;
  border-style: solid none; // add fake border to top/bottom
  border-width: 1px 0;
  border-color: transparent;
}

// misc
box#DesktopStatusBar {
  spinbutton { // spinbuttons inside the status-bar
    margin: rem(5.3px, $sw: 1.0) 0;
  }

  combobox { margin: rem(5.3px, $sw: 1.0) 0; }
}

widget > box#DesktopMainTable {
  &:dir(ltr) { margin-right: rem(8px); } // gap between entry and buttons
  &:dir(rtl) { margin-left: rem(8px); }
  // stop using circular animations
  // since we can not keep the perfect square allocations
  spinbutton > button {
    border-radius: 2px;
    -gtk-outline-radius: 2px;
    &:hover {
      background-color: $track_color;
      animation: none;
    }
    &:active {
      background-color: $track_color;
      transition: all 0.2s $slope_slow, background-image 0s;
      animation: flat_ripple_effect 0.3s $slope_slow forwards;
    }
  }
}

#InkscapePanel spinbutton > entry {
  // workaround for truncated labels in GimpSpinScale
  // FIXME: need to override weird inner-padding?
  margin: if($ref_weight < 1.0, rem(-2.7px) 0,
                                rem(-4px) 0);

  // re-fit to the parent entry node spacing
  > progress {
    margin: if($ref_weight < 1.0, rem(-2.7px) 0,
                                  rem(-4px) 0);
  }
}

#InkscapePanel {
  box#PanelContents,
  box#PaintSelector {
    button {
      &.toggle,
      &.radio {
        min-width: rem($icon_size * 2.5);
        min-height: rem($icon_size * 2.5);
        margin: 0;
        padding: 0;
        border-radius: 2px;
        -gtk-outline-radius: 2px;
        &:checked {
          @include button(flat-checked);
          border-image: none;
          &:disabled { @include button(flat-checked-insensitive); }
        }
      }
    }
  }
}

box#InkSpinScale { // >= 0.92+
  // cover up ugly stock style.css
  border-image: image($bg_color) 2 / 2px;
  box-shadow: inset 0 0 0 999px $bg_color;

  trough {
    &:not(:disabled) { background-color: gtkopacity($accent_color, 0.2); }
  }
}


// /**************
//  * Emacs24/25 *
//  **************/

@each $_version in '', '24' {
  window#Emacs#{$_version} {
    background-color: $bg_color;
    transition: none;

    > box#pane {
      background-color: $bg_color;

      > widget > toolbar#emacs-toolbar {
        background-color: $bg_color;
        transition: none;
      }
    }

    widget#emacs#{$_version} {
      &, > widget { transition: none; }

      > widget {
        > scrollbar {
          background-color: $base_color;

          // scrollbar node width '16px' is hard-coded?
          &.vertical {
            trough {
              border-width: 0 1px 0;
              border-style: solid;
              border-color: $solid_light_borders_color;
            }

            slider { min-width: 16px - (1px * 2); }
          }

          &, * { transition: none; }
        }
      }
    }
  }
}


// /************
//  * Electron *
//  ************/

// workaround for the context-menus in Electron apps
// do not use the alpha-blended colours
window.popup:not(.csd) {
  menu {
    background-color: $secondary_base_color;

    menuitem {
      background-color: $secondary_base_color;
      color: mix($fg_color, $secondary_base_color, 87%);
      &:hover {
        background-color: mix($fg_color, $secondary_base_color, 12%);
        color: $fg_color;
      }
      &:disabled { // popup frame pulls this?
        background-color: $secondary_base_color;
        color: mix($fixed_fg_color, $secondary_base_color, 28%);

        label, // reset for generic non-composited Gtk+ apps
        arrow { color: mix($fg_color, $secondary_base_color, 28%); }
      }
    }
  }
}


// /********************
//  * Transmission-Gtk *
//  ********************/

window.background:not(.solid-csd) > box.vertical > grid.horizontal {
  > button.flat:not(.image-button),
  > button.flat.image-button.toggle {
    // set min-limits for rectangular images
    > image,
    > widget > box.horizontal > image {
      min-width: 20px;
      min-height: 20px;
    }
  }

  // add spacing for 'Ratio' label
  > label { padding: 0 rem(5.3px, $sw: 1.0) rem(1.3px, $sw: 1.0); }
}


// /**************************
//  * Remmina Remote Desktop *
//  **************************/

window.background:not(.solid-csd) {
  // inline headerbar
  > box.vertical > headerbar:not(.titlebar) {
    > box.horizontal {
      > entry,
      > entry.default { // .default is added when focused only? crazy...
        // always use inverted colours
        color: $inverted_secondary_fg_color;
        caret-color: $inverted_secondary_fg_color;
        &:focus {
          color: $inverted_fg_color;
          caret-color: $inverted_fg_color;
        }
        &:disabled { color: $insensitive_inverted_secondary_fg_color; }
      }

      // hide unneeded separator
      > separator { background-color: transparent; }
    }
  }
}


// /***********
//  * Synapse *
//  ***********/

window.background:not(.solid-csd) > box.vertical {
  > widget widget,
  > box.vertical widget {
    &:selected { // selected-row?
      @extend %selected_items;
    }
  }
}


// /*******************
//  * MySQL-Workbench *
//  *******************/

window#wb_main_window {
  notebook#model_tabs {
    > header.top {
      background-color: $inverted_dark_color;

      tabs {
        arrow {
          color: $inverted_tertiary_fg_color;
          &:hover,
          &:active { color: $inverted_fg_color; }
          &:disabled { color: transparent; }
        }

        tab {
          &,
          label,
          button.flat { color: $inverted_tertiary_fg_color; }

          &:hover,
          &:checked {
            &,
            label,
            button.flat { color: $inverted_fg_color; }

            > image { background-color: $inverted_fg_color; }
          }
          &:disabled {
            &,
            label,
            button.flat { color: $insensitive_inverted_fg_color; }
          }

          > image { // 'Home' icon
            min-height: $icon_size;
            min-width: $icon_size;
            padding: rem(4px, $sw: 1.0);
            border-radius: 2px;
            background-color: $inverted_tertiary_fg_color;
          }
        }
      }
    }

    > stack > box.vertical > menubar { margin: 0 -1px; } // hide weird gap
  }

  box#dbquery,
  box#db.query.QueryBuffer,
  paned.vertical > box.horizontal > box.vertical > box.horizontal,
  notebook#model_tabs > stack > box.vertical > box.horizontal {
    border-bottom: 1px solid $borders_color;
  }

  button.flat.image-button { // revert to square
    margin: rem(5.3px) 0; // add vertical spacing
    border-radius: 2px;
    -gtk-outline-radius: 2px;
    &.toggle:checked {
      border-image: -gtk-gradient(radial,
                                  center bottom, 0,
                                  center bottom, 0.5,
                                  to($selected_bg_color),
                                  to(transparent))
                                  0 0 2 / 0 0 2px;
      background-color: transparent;
    }
  }

  box.horizontal > combobox { margin: rem(5.3px) 0; } // add vertical spacing

  entry#find { margin: rem(5.3px) 0; } // add vertical spacing

  treeview.view {
    background-color: $base_color;
    transition: none;
    &:selected { // enforce standard selection styling
      &, &:focus { @extend %selected_items; }
    }
  }
}


// /***************
//  * Chrome(ium) *
//  ***************/

window.background.chromium {
  // checked-tab & toolbar & button widgets
  background-color: if($variant == light, $bg_color, $base_color);
  color: if($variant == light, $secondary_fg_color, $fg_color);

  menubar,
  headerbar.titlebar {
    // foregrounds for inactive tabs and new-tab button in Refresh-mode
    color: mix($inverted_fg_color, $inverted_dark_color, 54%); // >= 69.0.3497
  }

  headerbar.titlebar {
    button.toggle { // account-button (> 64.0.3282?)
      border-radius: 2px; // back to text-button radius
      &:active { // use chromium-style toggled backgrounds
        background-color: gtkopacity($inverted_fg_color, 0.25);
      }
    }

    // from nav_button_provider_gtk3.cc (> 62.0.3202?)
    button.titlebutton { // title-buttons
      @extend %browser_csd_titlebutton;
      min-width: $icon_size; // > 16px causes image blurring
      min-height: $icon_size;
    }
  }

  // for unmaximize(restore) titlebutton
  &.maximized headerbar.titlebar button.titlebutton.maximize {
    @extend %browser_maxd_csd_titlebutton;
  }

  // FIXME: not for actual button widgets but for toolbar's separators
  // crazy: src/+/master/chrome/browser/ui/libgtkui/gtk_ui.cc#891
  button { // for active-tab borders
    border-width: 1px;
    border-style: solid;
    border-color: $solid_light_borders_color;
  }

  entry.chromium {
    &, &:focus { // overrides standard borders
      border-image: none;
      border: 1px solid $borders_color;
    }
  }

  // internal region of toolbar's entry widget
  > textview.view { background-color: $light_color; }
}


// /*********
//  * Tilix *
//  *********/

headerbar > box.horizontal.linked {
  > button.toggle.session-sidebar-button { // left-most revealer button
    min-height: $icon_size;
    padding-top: rem(($widget_size - $icon_size - 2.7px) / 2);
    padding-bottom: rem(($widget_size - $icon_size - 2.7px) / 2);
    border-radius: 2px;
    -gtk-outline-radius: 2px;
    font-weight: 700;

    > box { // reduce the gap between label and image
      > label {
        margin: rem(-2px) 0;
        &:dir(ltr) { padding: 0 rem(1.3px) 0 rem(4px); }
        &:dir(rtl) { padding: 0 rem(4px) 0 rem(1.3px); }
      }

      > image { // down-arrow
        &:dir(ltr) { padding: 0 rem(4px) 0 rem(1.3px); }
        &:dir(rtl) { padding: 0 rem(1.3px) 0 rem(4px); }
      }
    }
  }

  > button.image-button.session-new-button { // 'plus' button
                                             // hard-coded 2px lateral-padding
    min-width: $icon_size * 1.5 - 2px * 2;

    // make spacing gap between "View Session Sidebar" button and this
    &:dir(ltr) { margin-left: 8px; }
    &:dir(rtl) { margin-right: 8px; }

    > widget > box > image { // add actual lateral spacing
      min-width: $icon_size * 1.5 - 2px * 2;
      padding: if($ref_weight < 1.0,
               0 rem(($widget_size - $icon_size * 1.5 - 2px) / 2),
               0 rem(($widget_size - $icon_size * 1.5) / 2));
    }
  }
}

headerbar.titlebar > stack {
  > widget > label.title { // stack title
    margin-bottom: rem(5.3px - 1.3px);
  }

  > box.linked > entry { // unset vertical padding
    padding-top: 0;
    padding-bottom: 0;
  }
}

// left-side revealer
window.background > overlay > revealer { // parent container
  @each $_position, $_side_margin in (left, right),
                                     (right, left) {
    &.#{$_position} > scrolledwindow.frame {
      margin-#{$_side_margin}: 16px;
      border: none;
      box-shadow: $z-depth-3; // depth-4 is semamtically right,
                              // but too deep
    }
  }
}

list.tilix-session-sidebar {
  // use -image property instead
  background-image: image($secondary_dark_color);

  button.tilix-sidebar-close-button {
    min-height: 20px;
    min-width: 20px;
    padding: 0;
    color: gtkopacity($destructive_color, 0.87);
    &:hover,
    &:active,
    &:checked { color: $destructive_color; }
  }
}

// in-line titlebars
widget > box.terminal-titlebar {
  > button.flat.popup.toggle {
    &:dir(ltr) { padding: 0 rem(13.3px) 0 0; }
    &:dir(rtl) { padding: 0 0 0 rem(13.3px); }

    &:checked {
      border-image: -gtk-gradient(radial,
                                  center bottom, 0,
                                  center bottom, 0.5,
                                  to($selected_bg_color),
                                  to(transparent))
                                  0 0 2 / 0 0 2px;
      background-color: transparent;
    }

    label.tilix-terminal-title {
      // move button padding into label node
      padding: rem(9.3px) rem(13.3px) rem(10.7px);
      color: $secondary_fg_color;
      font-weight: 700;
      &:disabled { color: $insensitive_fg_color; }
      &:not(:disabled) {
        border-image: -gtk-gradient(radial,
                                    center bottom, 0,
                                    center bottom, 0.5,
                                    to($selected_bg_color),
                                    to(transparent))
                                    0 0 2 / 0 0 2px;
      }
    }

    &:hover,
    &:active,
    &:checked {
      &, label.tilix-terminal-title {
        &, &:disabled { color: $fg_color; }
      }
    }
  }

  > button.image-button { // 'plus' and 'close'
    &, &.toggle {
      margin: rem(2.7px) 0;
      padding: rem(10px - 2.7px);
      border-radius: 2px;
      -gtk-outline-radius: 2px;
    }
  }

  &.compact { // 'Small' option
    > button.flat.popup.toggle {
      &:dir(ltr),
      &:dir(rtl) { padding: 0; }

      label.tilix-terminal-title {
        padding: rem(1.3px, $sw: 1.0) rem(2.7px) rem(2.7px, $sw: 1.0);
      }
    }

    > button.image-button {
      &, &.toggle {
        margin: 0;
        padding: rem(2.7px, $sw: 1.0);
      }
    }
  }
}

// tab 'close' button when 'use tabs instead of sidebars'
notebook.tilix-background tab.reorderable-page button.tilix-small-button {
  // hard-coded 2px padding
  min-width: 0;
  min-height: 0;

  > widget > box > image {
    margin: 0 -2px;
    padding: rem(5.3px - 2.7px, $sw: 1.0);
  }
}


// /********
//  * PSPP *
//  ********/

// upstream should convert this to treeview node
notebook.psppire-data-editor widget.view {
  border-radius: 0; // unset roundness of cells

  entry { // = editable cell
    &,
    &:focus {
      min-width: unset;
      min-height: unset;
      padding: 0 2px;
      border-image: none;
      border-color: $selected_bg_color;
      background-color: $light_color;
      transition: none;
      &:dir(ltr) { border-left-width: 2px; }
      &:dir(rtl) { border-right-width: 2px; }
    }
  }

  button:not(.flat) { // = column_header buttons
    @extend %column_header_button;
  }
}


// /**************
//  * Vala-Panel *
//  **************/

// That app does not have any position specific style-classes,
// so embed indicators at the bottom of tasklist buttons as default.
// Then that app looks quite weird in vertical layout at all.
window#ValaPanel.background { // solid-mode
  background-color: $panel_bg_color;
  color: $inverted_fg_color;

  > decoration { all: unset; } // unset root decoration

  widget.-vala-panel-background > separator { // separator applet
    background-color: $panel_separator_color;
  }
}

button.flat.-panel-button { // generic panel buttons
  min-width: $icon_size;
  min-height: $icon_size;
  border-radius: 0;
  color: $inverted_fg_color;
  font-weight: 700;
  &:hover,
  &:active { color: $selected_fg_color; }
  &:checked {
    background-color: transparent;
    color: $selected_fg_color;
    box-shadow: inset 0 -2px $selected_bg_color;
    &:hover {
      background-image: radial-gradient(circle farthest-corner at center,
                          gtkopacity($inverted_fg_color, 0) 100%,
                          transparent 0%),
                          image(gtkopacity($inverted_fg_color, 0));
    }
  }
  &:disabled { color: $insensitive_inverted_fg_color; }

  // FIXME: weird asymmetrical spacing exists at the right side of Application-
  // Menu icon even if the 'caption' GtkLabel was hidden, so add damned
  // compensator at the opposite side...
  > widget > box.horizontal {
    &:dir(ltr) { margin-left: 2px; }
    &:dir(rtl) { margin-right: 2px; }
  }
}

button.flat.-panel-icon-button {
  @extend %budgie_icon_tasklist_button;

  &:hover {
    box-shadow: inset 0 -2px gtkopacity($inverted_fg_color, 0.4);
  }
  &:active,
  &:checked {
    box-shadow: inset 0 -2px $selected_bg_color;
  }
}

.unpinned button.flat.-panel-icon-button,
.pinned button.flat.-panel-icon-button.running {
  @extend %running_budgie_icon_tasklist_button;

  > image {
    background-image: image($selected_bg_color);
    background-size: (6px / 1.1) 2px; // 1:1.1 aspect deformation exists
    background-position: bottom center;
  }

  &:hover,
  &:active,
  &:checked {
    box-shadow: inset 0 -2px $selected_bg_color;
  }
}

// menubar-style'ed app menu
menubar.-vala-panel-background > menuitem { // override global values
  padding: 0 rem(4px, $sw: 1.0);
  font-weight: 700;
}

// run dialog
.-panel-run-dialog {
  scrolledwindow.frame { margin: 6px 0 0; }

  row.activatable {
    .dim-label { opacity: 0.87; }

    &:hover,
    &:active,
    &:selected {
      .dim-label { opacity: 1.0; }
    }
  }
}

// non-CSD preference dialog
dialog.background:not(.csd) {
  .dialog-vbox stacksidebar.sidebar scrolledwindow {
    .frame { border: 1px solid $borders_color; }

    list {
      &:dir(ltr),
      &:dir(rtl) { box-shadow: none; }
    }
  }

  // hide unndeeded animations (child radio node already has)
  .dialog-vbox grid.horizontal > grid.horizontal > modelbutton.flat {
    &:not(:disabled) {
      background-image: none;
      animation: none;
    }
  }
}


// /************
//  * Ubiquity *
//  ************/

window#live_installer {
  widget#title_eventbox.menubar { // title header container
    font-weight: 700;

    label#page_title,
    image#page_logo { color: $inverted_fg_color; }
  }

  widget#progress_eventbox.menubar { // bottom container
    color: $inverted_fg_color;

    expander {
      title {
        label,
        arrow {
          color: $inverted_secondary_fg_color;
          &:hover,
          &:active { color: $inverted_fg_color; }
          &:disabled { color: $insensitive_inverted_fg_color; }
        }
      }

      textview.view { // scrolled text-views
        &, > text {
          background-color: $base_color;
          color: $fg_color;
          caret-color: $fg_color;
        }
      }
    }

    // 4px from <data>
    progressbar trough { border-radius: 4px; }
  }
}


// /*********
//  * Pamac *
//  *********/

// toggle buttons in the buttonbox!? non-sense at all...
buttonbox.vertical > button.toggle {
  @each $b_type, $b_color in (suggested, $selected_bg_color),
                             (destructive, $destructive_color) {
    &.#{$b_type}-action:checked {
      background-image: none;
      background-color: mix($selected_fg_color, $b_color, 20%);
      color: $selected_fg_color;
      &:hover {
        background-image: none;
        background-color: $b_color;
        color: $selected_fg_color;
      }
    }
  }
}

// left-pane
box.vertical > stack > box > revealer > stack > scrolledwindow {
  > viewport.frame > list {
    @extend %sidebar_template;
    &:dir(ltr) { border-right: 1px solid $borders_color; }
    &:dir(rtl) { border-left: 1px solid $borders_color; }

    > row.activatable {
      &:selected {
        background-color: transparent;
        &:hover { background-image: image($track_color); }

        &, label { color: $selected_bg_color; }
      }

      > label { font-weight: 500; }
    }
  }
}

