/**
 * Budgie Desktop
 */

// Based on:
// https://github.com/solus-project/budgie-desktop/tree/master/src/theme

@use "../../../theme";
@use "../../../theme-color";
@use "../../../shadow";
@use "../common";
@use "../drawing";

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

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

  button {
    border-radius: theme.$corner-radius;

    @extend %button-flat-basic;
  }
}

.budgie-popover {
  border-style: solid;
  border-width: 1px;
  border-color: rgba(black, .1) rgba(black, .2) rgba(black, .3);
  border-radius: theme.$corner-radius + 1px;
  box-shadow: shadow.$z4;
  background-clip: padding-box;
  background-color: theme-color.$surface-z8;

  .container {
    padding: 2px;
  }

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

  list {
    // background-color: transparent;
  }

  row {
    padding: 0;

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

  button.flat:not(.image-button) {
    min-height: theme.$menu-item-dense-height;
    padding: 0 8px;
    color: theme-color.$on-surface;
    font-weight: normal;

    &:disabled {
      color: theme-color.disabled(theme-color.$on-surface);
    }
  }

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

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

    entry.search {
      border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
      border-image: none;
      border-radius: 0;
      box-shadow: none;
      font-size: 120%;
    }

    button.flat:not(.image-button) {
      min-height: 32px;
      padding: 0 8px;
      border-radius: 0;

      @include drawing.list-item;

      &:checked {
        background-color: theme-color.$selected-overlay;
      }

      // remove pointless indicator
      &:checked:disabled {
        background-color: transparent;
      }
    }
  }

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

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

    .name-button {
      image {
        &:dir(ltr) {
          margin-right: 8px - 5px;
        }

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

    .unmount-button {
      margin: (theme.$menu-item-dense-height - theme.$small-size) / 2;
      padding: 0;
    }

    .places-section-header {
    }

    .places-list:not(.always-expand) {
      margin-top: 4px;
      padding-top: 4px;
      border-top: 1px solid theme-color.divider(theme-color.$on-surface);
    }

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

      button {
      }
    }

    // use such sizes for consistency with other hard-coded dim-label sizes
    .alternative-label {
      padding: 3px;
      font-size: 15px;
    }
  }

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

    separator {
      margin: 4px 0;
    }

    flowboxchild {
      padding: 0;
    }
  }
}

// FIXME: workspace has unnecessary/unknown margin
.workspace-switcher {
  .workspace-layout {
    border: 0 solid theme-color.divider(theme-color.$on-panel);

    .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 theme-color.divider(theme-color.$on-panel);

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

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

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

  .workspace-item {
    transition: theme.$transition;

    &.current-workspace {
      background-color: theme-color.activated-overlay(theme-color.$on-panel);
    }
  }

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

    &:active {
      background-image: none;
    }

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

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

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

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

// Panel
.budgie-panel {
  transition: background-color theme.$state-duration theme.$ease-out;
  background-color: theme-color.$panel;
  color: theme-color.hint(theme-color.$on-panel);
  font-weight: 500;

  &.transparent {
    background-color: theme-color.$scrim;
    color: theme-color.hint(theme-color.$on-scrim);
  }

  button {
    min-height: 16px;
    min-width: 16px;
    padding: 0;
    border-radius: 0;
    color: theme-color.hint(theme-color.$on-panel);
    @include drawing.ink-color(theme-color.$on-panel, $button-style: "flat");

    &:disabled {
      background-color: transparent;
      color: theme-color.disabled-hint(theme-color.$on-panel);
    }

    &:checked {
      $background-color: theme-color.activated-overlay(theme-color.$on-panel);
      color: theme-color.$on-panel;
      @include drawing.ink-color(theme-color.$on-panel, $button-style: "flat", $on: $background-color);

      &:disabled {
        background-color: theme-color.activated-overlay(theme-color.$on-panel);
        color: theme-color.disabled(theme-color.$on-panel);
      }
    }
  }

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

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

  separator {
    background-color: theme-color.stroke(theme-color.$on-panel);
  }

  // used to indicate unread notifications
  .alert {
    color: theme-color.error(theme-color.$on-panel);
  }

  // End Section needs to be fancy
  .end-region {
    // background-color: rgba(0,0,0,0.2);
  }

  // budgie-pixel-saver-applet
  .titlebar:not(headerbar) {
    min-height: 0;
    padding: 0;
    box-shadow: none;
    background-color: transparent;
    color: theme-color.$on-panel;

    button:not(.suggested-action):not(.destructive-action) {
      color: theme-color.hint(theme-color.$on-panel);
    }
  }

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

    @extend %underscores;
  }

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

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

    @extend %underscores;

    // for indicator colors
    &:not(:checked) {
      color: theme-color.disabled(theme-color.$on-panel);

      &:disabled {
        color: theme-color.disabled-hint(theme-color.$on-panel);
      }
    }
  }

  .unpinned button.flat.launcher,
  .pinned button.flat.launcher.running {
    @extend %underscores-checked;
  }
}

$underscores-list:
  (top,    center calc(1px),        2 0 0 0 / 2px 0 0 0),
  (bottom, center calc(100% - 1px), 0 0 2 0 / 0 0 2px 0),
  (left,   calc(1px) center,        0 0 0 2 / 0 0 0 2px),
  (right,  calc(100% - 1px) center, 0 2 0 0 / 0 2px 0 0);

%underscores {
  @each $pos, $b_pos, $b_wid in $underscores-list {
    .#{$pos} & {
      & {
        border-image:
          radial-gradient(
            circle closest-corner at #{$b_pos},
            currentcolor 0%,
            transparent 0%
          ) 0 0 0 0 / 0 0 0 0;
      }

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

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

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

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

  // Raven borders
  .#{$pos} frame.raven-frame > border {
    margin-#{$b_pos}: 32px;
    // border-#{$b_pos}: 1px solid divider($on-surface);
  }

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

// Raven
.raven {
  background-color: theme-color.$surface-z8;

  list {
    // background-color: transparent;
  }

  // remove extra space between box and .raven-header.bottom
  > box:not(:only-child) {
    margin-bottom: -10px;
  }

  .raven-header {
    min-height: theme.$medium-size;
    padding: 3px;

    // Adopt tabs style only for .top
    &.top {
      padding: 0;
      border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);

      stackswitcher.linked > button {
        @extend %button-flat-activatable;

        margin: -4px 0 -5px; // remove unwanted vertical margins
        padding: 0 16px;
        min-height: theme.$large-size;
        border-image:
          radial-gradient(
            circle closest-corner at center calc(100% - 1px),
            theme-color.$primary 0%,
            transparent 0%
          ) 0 0 0 / 0 0 0;
        border-radius: 0;

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

    &.bottom {
      border-top: 1px solid theme-color.divider(theme-color.$on-surface);
    }
  }

  stack {
    // remove extra space in Notifications stack
    .raven-header {
      margin-top: -6px;
    }

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

  .expander-button {
    border-radius: theme.$circular-radius;
  }

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

    // Adopt Choice chips style
    stackswitcher.linked > button {
      margin: -2px 8px 9px;
      padding: 0 12px;
      min-height: 32px;
      border-radius: theme.$circular-radius;
      color: theme-color.hint(theme-color.$on-surface);
      font-weight: normal;
      @include drawing.ink-color(theme-color.$on-surface, $button-style: "flat", $on: theme-color.fill(theme-color.$on-surface));

      &:checked {
        color: theme-color.$primary;
        @include drawing.ink-color(theme-color.$primary, $button-style: "flat", $on: theme-color.activated-overlay(theme-color.$primary));
      }

      &:not(:first-child) {
        margin-left: 0;
      }
    }

    // Default music icon
    > overlay > widget > image {
      color: theme-color.fill(theme-color.$on-surface);
    }
  }

  revealer > .raven-background {
    border-bottom: 1px solid theme-color.divider(theme-color.$on-surface);
  }

  .raven-header + .raven-background {
    border-top: 1px solid theme-color.divider(theme-color.$on-surface);
  }

  // Application block in Notifications stack
  viewport.frame > list > row {
    // Remove all effects. This should be just a container.
    padding: 0;
    box-shadow: none;
    background: none;

    &:not(:first-child) {
      border-top: 1px solid theme-color.divider(theme-color.$on-surface);
    }

    > box {
      // Remove awkward hard-coded margins
      margin-top: -5px;
      margin-left: -5px;
      margin-bottom: -5px;

      // Application header
      > box {
        padding: 6px;
        margin-bottom: -10px; // Remove hard-coded spacing
      }

      // Notifications
      > list > row {
        padding: 8px;

        > box {
          margin-bottom: -5px; // Remove hard-coded margin-bottom

          > box {
            // Title
            > label {
              font-weight: bold;
            }

            // Close button
            > button.image-button {
              padding: 0;
            }
          }

          > label {
            margin-top: -6px; // For less spacing: 10 -> 4
            font-size: smaller;
          }
        }
      }
    }
  }

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

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

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

  &:selected {
    border-radius: theme.$corner-radius;
    background-color: theme-color.$selected-overlay;
  }
}

// MPRIS Applet
.raven-mpris {
  background-color: theme-color.$scrim;
  color: theme-color.$on-scrim;

  label {
    min-height: 24px;
  }

  button.image-button {
    padding: (theme.$large-size - 24px) / 2;
    color: theme-color.hint(theme-color.$on-scrim);
    @include drawing.ink-color(theme-color.$on-scrim, $button-style: "flat");
  }
}

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

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

  .notification-body {
    color: theme-color.hint(theme-color.$on-surface);
  }
}

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

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

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

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

.drop-shadow {
  margin: 5px 9px;
  padding: 3px;
  border-radius: theme.$corner-radius;
  box-shadow: shadow.$z4, inset 0 1px theme-color.highlight(theme-color.$surface-z8);
  background-color: theme-color.$surface-z8;

  button {
    @extend %button-flat;

    &.text-button:not(:disabled) {
      color: theme-color.$primary;
      @include drawing.ink-color(theme-color.$primary, $button-style: "flat");
    }
  }

  .linked > button {
    margin-right: theme.$container-padding;
  }
}

%budgie_dialog {
  border-radius: theme.$corner-radius;
  box-shadow: inset 0 1px theme-color.highlight(theme-color.$surface-z8);
  background-color: theme-color.$surface-z8;

  decoration {
    border-radius: theme.$corner-radius;
  }
}

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

  > box {
    padding: 8px;
  }

  // Hide power icon
  image {
    margin: -8px;
    -gtk-icon-transform: scale(0);
  }

  label:not(:last-child),
  .dialog-title {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 500;
  }

  .dialog-title + label {
    color: theme-color.hint(theme-color.$on-surface);
  }

  .linked.horizontal > button {
    @extend %button-flat;

    &:not(:last-child) {
      margin-right: 8px;
    }

    &:not(:disabled) {
      color: theme-color.$primary;
      @include drawing.ink-color(theme-color.$primary, $button-style: "flat");
    }
  }
}

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

  .message {
    color: theme-color.hint(theme-color.$on-surface);
  }

  .failure {
    color: theme-color.$error;
  }
}

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

  entry.search {
    font-size: 120%;
    padding: theme.$container-padding 8px + theme.$container-padding;
    border-image: none;
    box-shadow: none;
    background-color: transparent;
  }

  list {
    padding: 4px 0;
    // background-color: transparent;

    .dim-label {
      color: inherit;
    }
  }

  scrolledwindow {
    border-top: 1px solid theme-color.divider(theme-color.$on-surface);
  }

  scrollbar {
    &.right,
    &.bottom {
      border-bottom-right-radius: theme.$corner-radius;
    }

    &.left,
    &.bottom {
      border-bottom-left-radius: theme.$corner-radius;
    }
  }
}