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

// specific ripple-effect for IconTaskList
@keyframes budgie_ripple_effect {
  from {
    background-image: -gtk-gradient(radial,
                                    center center, 0,
                                    center center, 0.001,
                                    to(gtkalpha($inverted_fg_color, 0.2)),
                                    to(transparent)),
                      linear-gradient(to bottom,
                                      gtkalpha($inverted_fg_color, 0.2));
  }
  to {
    background-image: -gtk-gradient(radial,
                                    center center, 0,
                                    center center, 0.4,
                                    to(gtkalpha($inverted_fg_color, 0.2)),
                                    to(transparent)),
                      linear-gradient(to bottom,
                                      gtkalpha($inverted_fg_color, 0.2));
  }
}

// orientation
$orientation: ((top, bottom),
               (bottom, top),
	       (left, right),
	       (right, left));

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

// disable backdrop transparency
.budgie-panel {
  &:backdrop,
  *:backdrop { opacity: 1.0; }
}

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

  // panel border styling
  @each $along_side, $opp_side in $orientation {
    .#{$along_side} & { border-#{$along_side}: 2px solid #000000; }
  }

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

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

// wnck tasklist styling
.budgie-panel #tasklist-button {
  &, &:backdrop {
    button {
      border: none;
      background: none;
      opacity: 0.5;
      &:hover,
      &:active,
      &:checked { opacity: 1.0; }
    }
  }
}

// icon tasklist styling
.budgie-panel {
  button.flat.launcher {
    &, &:backdrop {
      min-width: rem(24px);
      min-height: rem(24px);
      padding: 0;
      border: 2px solid transparent;
      background-image: -gtk-gradient(radial,
                                      center center, 0,
                                      center center, 0.4,
                                      to(gtkalpha($inverted_fg_color, 0)),
                                      to(transparent)),
                        linear-gradient(to bottom,
                                        gtkalpha($inverted_fg_color, 0));
      background-size: $image_button_large;
      background-position: center center;
      opacity: 0.5;
      transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transition-property: opacity,
                           border-color,
                           background-color,
                           background-image,
                           box-shadow;
      transition-duration: 0.2s;
      &:hover {
        opacity: 0.75;
        -gtk-icon-effect: highlight;
      }
      &:active {
        opacity: 1.0;
        transition-duration: 0;
        animation: budgie_ripple_effect 0.2s
                   cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
      }
      &:checked {
        opacity: 1.0;
        background-color: transparent;
        &:hover { -gtk-icon-effect: highlight; }
      }
    }
  }

  .unpinned button.flat.launcher,
  .unpinned button.flat.launcher:backdrop,
  .pinned button.flat.launcher.running,
  .pinned button.flat.launcher.running:backdrop {
    opacity: 1.0;
    &:hover { -gtk-icon-effect: highlight; }
  }
}

// draw underscores
@each $along_side, $opp_side in $orientation {
  .#{$along_side} .budgie-panel {
    #tasklist-button button,
    #tasklist-button button:backdrop {
      border: 2px solid transparent;
      &:hover {
        border-#{$along_side}: 2px solid gtkalpha($inverted_fg_color, 0.4);
      }
      &:active,
      &:checked {
        border-#{$along_side}: 2px solid $selected_bg_color;
      }
    }

    button.flat.launcher,
    button.flat.launcher:backdrop {
      border: 2px solid transparent;
      &:hover {
        border-#{$along_side}: 2px solid gtkalpha($inverted_fg_color, 0.4);
      }
      &:active,
      &:checked {
        border-#{$along_side}: 2px solid $selected_bg_color;
      }
    }
  }
}

// draw underscores and dots
@each $along_side, $_dot in (top, top),
                            (bottom, bottom),
                            (left, left),
                            (right, right) {
  .#{$along_side} .budgie-panel {
    .unpinned button.flat.launcher,
    .unpinned button.flat.launcher:backdrop,
    .pinned button.flat.launcher.running,
    .pinned button.flat.launcher.running:backdrop {
      border: 2px solid transparent;
      border-image: -gtk-scaled(url("assets/running-dot-#{$_dot}.png"),
                                url("assets/running-dot-#{$_dot}@2.png"))
                    2 / 2px;
      &:hover,
      &:active,
      &:checked {
        border-#{$along_side}: 2px solid $selected_bg_color;
        border-image: none;
      }
    }
  }
}

// main menu styling
.budgie-menu {
  border-radius: 2px;
  background-color: $secondary_base_color;

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

  row { // reset background
    &, &.activatable {
      background-image: none;
      background-color: $secondary_base_color;
      color: $secondary_fg_color;
      transition: none;

      // FIXME: enlarge vertical spacing with icons' paddding
      image { padding: rem(5.3px) 0 rem(6.7px); }
    }
    &:hover,
    &.activatable:hover {
      background-image: none;
      background-color: $secondary_base_color;
      color: $fg_color;
      transition: none;
    }
  }

  scrolledwindow undershoot {
    &.top { @include undershoot(top, $secondary_base_color); }
    &.bottom { @include undershoot(bottom, $secondary_base_color); }
    &.left { @include undershoot(left, $secondary_base_color); }
    &.right { @include undershoot(right, $secondary_base_color); }
  }
}

// raven styling
.raven-frame { border: none; }

.raven {
  margin: -1px; // FIXME: unwanted 1px gap exists around raven
  padding: 0;
  border: none;
  color: $secondary_fg_color;
  background-color: gtkopacity($dark_color, 0.9);

  // mixin with drop-shadows to avoid the raven edge shine-through
  &:dir(ltr) { box-shadow: -1px 0 1px rgba(0, 0, 0, 0.12); }
  &:dir(rtl) { box-shadow: 1px 0 1px rgba(0, 0, 0, 0.12); }

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

  .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 { // always use dark variant
    border-top: 1px solid $borders_color;
    background-color: $inverted_dark_color;
    box-shadow: if($variant == 'light', $inline-shadow-light,
                                        $inline-shadow-dark);

    button {
      padding: rem(13.3px);
      color: $secondary_accent_color;
      &:hover,
      &:active,
      &:checked { color: $accent_color; }
      &:disabled { color: gtkopacity($accent_color, 0.4); }
    }
  }

  .option-subtitle {
    color: $insensitive_secondary_fg_color;
    font-size: 90%;
  }

  scrolledwindow { background: transparent; }

  list,
  row,
  row.activatable {
    background-color: transparent;
    &:not(.list):hover { color: $fg_color; }
    &:not(.list):selected {
      &, label {
        color: $selected_bg_color;
      }
      &:hover { background-color: gtkopacity($selected_bg_color, 0.1); }
    }

    separator {
      min-height: 1px;
      min-width: 1px;
      margin-bottom: rem(6.7px);
      border: none;
      color: transparent;
      background-color: transparent;
      background-image: none;
      box-shadow: inset 0 -1px gtkopacity($insensitive_fg_color, 0.55);
    }
  }

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

    > button.text-button { // 'exit' button
      min-height: rem(13.3px);
      min-width: rem(13.3px);
      padding: rem(9.3px) rem(10.7px) rem(10.7px);
      color: $secondary_selected_fg_color;
      background-color: $suggested_color;
      &:hover { color: $selected_fg_color; }
      &:active {
        color: $selected_fg_color;
        background-color: $selected_bg_color;
      }
      &:checked {
        color: $secondary_selected_fg_color;
        background-color: mix($selected_fg_color, $suggested_color, 20%);
      }
      &:disabled {
        @include button(flat-insensitive, $track_color, $insensitive_fg_color);
      }
    }

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

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

  undershoot { // remove undershoot
    &.top,
    &.bottom,
    &.left,
    &.right { background-image: none; }
  }
}

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

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

// notifications
.budgie-notification-window {
  border-radius: 2px;
  background: none;
}

.budgie-notification {
  &.background { border-radius: 2px; }

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

  .notification-body { color: $fg_color; }
}

// run-dialog styling
.background.csd.budgie-run-dialog {
  border: 1px solid $borders_color;
  border-top-color: $highlight_color;
  background-color: transparent;

  decoration {
    border-radius: 2px; // hard-coded 6px is ugly...
    background-color: gtkopacity($dark_color, 0.9);

    headerbar { border-radius: 2px; }
  }

  scrolledwindow {      // FIXME: using GtkEntry style-class!?
    border-image: none; // remove underline indicator

    undershoot { // remove undershoot
      &.top,
      &.bottom,
      &.left,
      &.right { background-image: none; }
    }
  }

  // hide weird separator
  box > box > separator {
    border: 0 none transparent;
    color: transparent;
    background-color: transparent;
  }

  // 'close' button
  button.image-button {
    color: $secondary_accent_color;
    &:hover,
    &:active,
    &:checked { color: $accent_color; }
    &:disabled { color: gtkopacity($accent_color, 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: $inverted_bg_color;
  color: $inverted_fg_color;
  font-weight: 700;
  opacity: 0.9;

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

  button,
  .linked > button {
    @include button(flat-normal);
    padding: rem(9.3px) rem(13.3px) rem(10.7px);
    border: 2px solid transparent;
    border-radius: 0;
    color: $secondary_accent_color;
    background-color: transparent;
    background-size: $text_button_small;
    &:hover {
      @include button(flat-hover);
      color: $accent_color;
    }
    &:active {
      @include button(flat-active);
      color: $accent_color;
    }
    &:checked {
     @include button(flat-checked);
      color: $secondary_accent_color;
    }
    &:disabled { @include button(flat-insensitive); }

    &: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
  &:not(.budgie-session-dialog) {
    .message { color: $secondary_fg_color; }
    .failure {
      color: $accent_color;
      font-weight: 700;
    }
  }
}

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


/*****************
 * Unity Desktop *
 *****************/

// window decorations
UnityDecoration {
  -UnityDecoration-extents: 28px 0 0 0;
  -UnityDecoration-input-extents: 8px;

  -UnityDecoration-shadow-offset-x: 0px;
  -UnityDecoration-shadow-offset-y: 8px;
  -UnityDecoration-active-shadow-color: rgba(0, 0, 0, 0.24);
  -UnityDecoration-active-shadow-radius: 12px;
  -UnityDecoration-inactive-shadow-color: rgba(0, 0, 0, 0.16);
  -UnityDecoration-inactive-shadow-radius: 6px;

  -UnityDecoration-glow-size: 10px;
  -UnityDecoration-glow-color: $selected_bg_color;

  -UnityDecoration-title-indent: 16px;
  -UnityDecoration-title-fade: 32px;
  -UnityDecoration-title-alignment: 0.0;

  &.top {
    border-width: 1px 0 0;
    border-style: solid none none;
    border-color: $borders_color;
    border-radius: 2px 2px 0 0;
    padding: 1px 6px 0 6px;

    background-image: linear-gradient(to bottom, $inverted_dark_color);
    // The foreground color will be used to paint the text
    color: $inverted_fg_color;
    box-shadow: inset 0 1px $highlight_color;

    &:backdrop { color: $insensitive_inverted_fg_color; }
  }

  &.left,
  &.right,
  &.bottom {
    &, &:backdrop { background-image: none; }
  }
}

// panel styling
UnityPanelWidget,
.unity-panel {
  &, &:backdrop {
    border-bottom: 1px solid $panel_bg_color;
    color: $inverted_fg_color;
    background-image: linear-gradient(to bottom,
                                      opacify($panel_bg_color, 0.9));
    box-shadow: none;
  }
}

.unity-panel.menubar,
.unity-panel .menubar {
  background-color: transparent;
  background-image: none;
  box-shadow: none;

  &.menuitem,
  & .menuitem * {
    padding: 0 6px;
    border-radius: 0;
    border-bottom: none;
    color: $inverted_fg_color;
    background-color: transparent;
    &:hover {
      color: $selected_fg_color;
      box-shadow: inset 0 -2px $selected_bg_color;
    }
  }
}


/************
 * Corebird *
 ************/

// use normal foreground colour
stack button.profile-button {
  &:checked { color: $fg_color; }
}

headerbar.titlebar box {
  button.toggle.account-button { // left-most account-button
    min-width: rem(13.3px);
    min-height: rem(13.3px);
    // it doesn't work
    padding: rem(6.7px) rem(10px) rem(6.7px);
    // revert to square button since we can't make perfect circle button
    border-radius: 2px;
    -gtk-outline-radius: 2px;

    // it doesn't work
    .avatar-round { border-color: transparent; }
  }

  button.image-button.toggle { // tweet button
    min-width: rem(13.3px);
    min-height: rem(13.3px);
    padding: rem(6.7px) rem(10px) rem(6.7px);
  }
}


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

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

window {
  // workaround for invisible text in rename entry
  EelEditableLabel { transition: none; }

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

  // 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 {
    // FIXME: conflicts with lollypop.
    // background-color: $secondary_dark_color;
    // box-shadow: $inline-shadow;

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

    > box > button.image-button {
      @include 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($track_color),
                                  to(transparent))
                                  0 0 0 / 0 0 0px;
      color: $secondary_fg_color;
      box-shadow: none;
      &:hover {
        @include button(flat-hover);
        border-image: none;
        color: $fg_color;
        box-shadow: none;
      }
      &:checked {
        @include 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;
        box-shadow: none;
        &:disabled {
          @include button(flat-checked-insensitive);
          border-image: none;
          background-color: transparent;
          color: $insensitive_fg_color;
          box-shadow: none;
          > label { color: inherit; }
        }
      }
      &:disabled {
        @include button(flat-insensitive);
        border-image: none;
        background-color: transparent;
        color: $insensitive_secondary_fg_color;
        box-shadow: none;
      }
    }

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


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

window > headerbar > widget > box.horizontal {
  > grid.horizontal > button.toggle.image-button {
    min-width: rem(17.3px);
    min-height: rem(37.3px);
    padding: 0 rem(10px) 0;
  }

  > button.image-button {
    min-width: rem(17.3px);
    min-height: rem(37.3px);
    margin: rem(-2px) 0;
    padding: 0 rem(10px) 0;
  }
}


/***************************
 * Cinnamon-control-center *
 ***************************/

window > box.vertical > stack > scrolledwindow {
  // stop using $base_color
  iconview {
    &, &.view { background-color: transparent; }
  }

  toolbar {
    background-color: $secondary_dark_color;
    box-shadow: if($variant == 'light', $inline-shadow-light,
                                        $inline-shadow-dark);
  }
}


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

.xfce4-panel {
  background-color: $panel_bg_color;
  color: $inverted_fg_color;
  font-weight: 700;

  button {
    @include button(flat-normal);
    padding: 0px 4px;
    border: none;
    border-radius: 0;
    color: $inverted_fg_color;
    background-color: transparent;
    &:hover {
      color: $selected_fg_color;
      background-color: transparent;
      box-shadow: inset 0 -2px $track_color;
    }
    &:checked,
    &:hover:checked,
    &:disabled:checked { // 'checked' = 'active'
      color: $selected_fg_color;
      background-color: transparent;
      box-shadow: inset 0 -2px $selected_bg_color;
    }

    label:backdrop,
    &:backdrop { opacity: 1.0; }
  }

  menu { -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;
    }
    &:backdrop { opacity: 1.0; }
  }
}


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

window > 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: rem(13.3px);
      padding-left: rem(12px);
      padding-right: rem(12px);
    }
  }
}


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