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

$menuitem_size: 28px;
$medium_size: 32px;
$large_size: 44px;
$container_padding: 6px;
$z-depth-2: rgba(0, 0, 0, 0.28);
$z-depth-4: rgba(0, 0, 0, 0.34);

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

.budgie-panel {
  // solid-mode
  // always use dark-color of dark variant
  background-color: $panel_bg;
  color: white;
  font-weight: normal;

  // used to indicate unread notifications
  .alert { color: $suggested_color; }
  
  &:backdrop {
      color: white;
      background-color: $panel_bg;
  }

  // transparent-mode
  &.transparent {
    background-color: gtkopacity($panel_bg, 0.4);
    color: white;

  }

  button {
    @extend button;

    min-height: 16px;
    min-width: 16px;
    padding: 0;
    border-radius: 0;
  }

  &.horizontal button { padding: 0 4px; }

  &.vertical button { padding: 4px 0; }

  separator { background-color: gtkopacity($fg_color, 0.4); }

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

  .end-region {
      background-color: rgba(0,0,0,0.3);
      border-radius: 0px;
      separator { background-color: transparentize(white, 0.85); }
      label {
        font-weight: 700;
        color: white;
      }
  }
}

.budgie-panel {
  button.flat.launcher {
    padding: 0;
    border-radius: 0;
    border: none;
    background-image: radial-gradient(circle farthest-corner at center,
                                      gtkalpha($fg_color, 0) 100%,
                                      transparent 0%),
                      image(gtkalpha($fg_color, 0));
    background-position: center center;

    > image {
      opacity: 0.87;
    }

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

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

      > image { opacity: 1.0; }
    }
  }

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

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

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

// draw underscores and dots
@each $position, $_line in (top, 0 2px),
                           (bottom, 0 -2px),
                           (left, 2px 0),
                           (right, -2px 0) {
  .#{$position} .budgie-panel {
    button#tasklist-button,
    button.flat.launcher {
      &:hover {
        box-shadow: inset #{$_line} gtkalpha($fg_color, 0.4);
        background-color: gtkopacity($fg_color, 0.4);
        border: none;
      }
      &: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-position: #{$position} center;
      }

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

@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},
                                      gtkalpha(#000000, 0.23),
                                      gtkalpha(#000000, 0.08),
                                      transparent);
  }
}

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

  .container { padding: 2px; }

  border { border: none; }

  list { background-color: transparent; }

  row {
    padding: 0;

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

  &:not(.budgie-menu) button.flat:not(.image-button) {
    min-height: $menuitem_size;
    padding: 0 8px;
    color: $fg_color;
    font-weight: normal;

    &:disabled { color: $insensitive_fg_color; }
  }

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

  &.user-menu {
    .container { padding: 8px; }

    separator { margin: 4px 0; }
  }

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

  &.night-light-indicator {
    .container { padding: 8px; }
  }

  &.places-menu {
    .container { padding: 8px; }

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

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

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

    separator { margin: 4px 0; }

    flowboxchild { padding: 0; }
  }
}

// main menu styling
.workspace-switcher {
  .workspace-layout {
    border: 0 solid $bg_color;

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

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

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

  .workspace-item,
  .workspace-add-button {
    border: 0 solid $bg_color;

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

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

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

  .workspace-item {

    &.current-workspace { background-color: $bg_color; }
  }

  .workspace-add-button {
    &:hover { box-shadow: none; }

    &:active { background-image: none; }

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

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

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

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

  entry.search {
    border-style: none;
    border-bottom: 1px solid $borders_color;
    border-radius: 1px;
    box-shadow: none;
    font-size: 120%;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  button {
    @extend row.activatable;

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

  }

  row {
    padding: 0;

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

// Menu Button
button.budgie-menu-launcher {
  // padding: 0 2px;
  color: $base_bg_color;
  border: none;
  
  &:hover {
      background-color: gtkopacity($fg_color, 0.4);
      border: none;
    }
}

// User Menu
popover.background.user-menu {
  padding: 8px;

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

  separator { margin: 4px 0; }

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

// Raven Trigger
button.raven-trigger {
    color: white;
    border: none;
    
    &:hover {
      background-color: gtkopacity($fg_color, 0.4);
      border: none;
    }
}

// Places Menu
popover.background.places-menu {
  padding: 8px;

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

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

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

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

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

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

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

  // FIXME: untested
  .unlock-area {
    entry {
    }

    button {
    }
  }
}

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

// Raven
.raven {
  background-color: $bg_color;
  color: $fg_color;
  padding: 0;
  border: none;

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

    &.top {
      padding: 2px 0;
      background-color: $bg_color;
      color: $fg_color;

      stackswitcher button {
        margin: -$container_padding 0;
        min-height: $medium_size;
      }

    }

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

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

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

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

  }

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

  .powerstrip button {
    margin: 2px 0 1px;
    padding: ($large_size - 24px) / 2;
  }

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

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

  &:selected {
    border-radius: 2px;
    background-color: $bg_color;
  }
}

// MPRIS Applet
.raven-mpris {
  background-color: rgba($bg_color, 0.8);
  color: $fg_color;

  label { min-height: 24px; }

}

// Notifications
.budgie-notification-window {
  background-color: transparent;
  color: $osd_fg_color;
  border-radius: 2px;
  // draw actual backgrounds
  .drop-shadow { background-color: $osd_bg_color; }
}

.budgie-notification {
  .notification-title { font-size: 110%; color: $osd_fg_color; }
  .notification-body { @extend .dim-label; color: $osd_fg_color; }
  background-color: $osd_bg_color;
  color: $osd_fg_color;
}

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

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

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

  .drop-shadow {
    margin: 8px 8px 16px; // reserve area for shadows
    border-radius: 2px;
    background-color: $osd_bg_color;
    box-shadow: $z-depth-2;
    label.budgie-switcher-title {
        color: $osd_fg_color;
        &:dir(ltr) { padding: 0 0 0 6px; }
        &:dir(rtl) { padding: 0 6px 0 0; }
    }
  }
}

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

.drop-shadow {
  margin: 5px 9px;
  padding: 3px;
  border-radius: 2px;
  box-shadow: none;
  background-color: $bg_color;

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

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

  decoration { border-radius: 2px; }
}

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

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

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

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

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

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

  .message { color: $fg_color; }

  .failure { color: $destructive_color; }
}

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

  background-color: $base_color;
  border-style: none;

  entry.search {
    font-size: 120%;
    box-shadow: none;
    background-color: transparent;
    border-style: none;
    border-bottom: 1px solid $borders_color;
    border-radius: 1px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  list .dim-label { opacity: 1; }

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