// based css:
// https://github.com/solus-project/budgie-desktop/blob/master/theme/3.20/sass/_main.scss

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

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

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

  scrolledwindow:not(.categories) { background-color: $base_color; }

  entry.search {
    border-bottom: 1px solid $borders_color;
    border-radius: $md_radius $md_radius 0 0;
    box-shadow: inset 0 1px $highlight_color;
    font-size: 120%;
  }

  button {
    @extend row.activatable;

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

    &:disabled { color: $disabled_fg_color; }

    &:checked { @extend %selected_items; }
  }

  row { all: unset; }
}

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

// User Menu
.user-menu {
  padding: 10px;

  // .content-box separator { background-color: $borders_color; }
}

// Raven Trigger
button.raven-trigger {
  padding-left: 2px;
  padding-right: 2px;
}

// Panel
.budgie-panel {
  background-color: $topbar_color;
  color: $topbar_fg_color;
  font-weight: 500;

  button { border-radius: 0; }

  separator { background-color: $track_color; }

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

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

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

  @extend %flat_button;

  @extend %underscores;
}

// Icon Tasklist
.budgie-panel {
  button.flat.launcher {
    padding-top: 0;
    padding-bottom: 0;

    @extend %underscores;
  }

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

%underscores {
  .top & {
    border-image: radial-gradient(circle closest-corner at center calc(1px),
                                  currentColor 0%,
                                  transparent 0%)
                                  0 0 0 / 0px 0 0;

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

  .bottom & {
    border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                  currentColor 0%,
                                  transparent 0%)
                                  0 0 0 / 0 0 0px;

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

  .left & {
    border-image: radial-gradient(circle closest-corner at calc(1px) center,
                                  currentColor 0%,
                                  transparent 0%)
                                  0 0 0 0 / 0 0px 0 0;

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

  .right & {
    border-image: radial-gradient(circle closest-corner at calc(100% - 1px) center,
                                  currentColor 0%,
                                  transparent 0%)
                                  0 0 0 0 / 0 0 0 0px;

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

frame.raven-frame > border {
  border-style: none;
  box-shadow: $z-depth-4;
}

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

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

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

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

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

  stackswitcher.linked > button {
    @extend %flat_button;

    border-image: radial-gradient(circle closest-corner at center calc(100% - 1px),
                                  $warning_bg_color 0%,
                                  transparent 0%)
                                  0 0 0 / 0 0 0px;
    border-radius: 0;

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

  .raven-header {
    min-height: $medium_size;
    padding: 3px;
    border-style: none none solid;
    border-width: 1px;
    border-color: $borders_color;

    &:not(.top) {
      margin-top: -6px; // remove extra spaces, but not perfect :(

      button {
        @extend %simple_flat_button;

        &.image-button {
          border-radius: $circular_radius;
          -gtk-outline-radius: $circular_radius;
        }
      }
    }

    &.top {
      padding: 2px 0;
      border-style: none;
      background-color: $primary_color;
      color: $inversed_fg_color;

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

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

      > image { margin: 0 8px; }

      > label {
        margin: 0 -8px;
        font-weight: bold;
      }
    }

    &.bottom { border-style: solid none none; }
  }

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

  .expander-button { @extend %circular_button; }

  .raven-background {
    border-bottom: 1px solid $borders_color;
    background-color: $lighter_bg_color;

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

    &.frame { border-style: none none solid; }

    > overlay > image { color: $track_color; }
  }

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

  > stack > box > .raven-background {
    border-bottom-style: none;
    background-color: $primary_color;
    color: $inversed_fg_color;

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

  .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: $primary_color;
  }
}

// MPRIS Applet
.raven-mpris {
  color: white;
  background-color: scale-alpha(black, $middle_opacity);

  label { min-height: 24px; }

  button.image-button { padding: ($large_size - 24px) / 2; }
}

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

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

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

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

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

.drop-shadow {
  margin: 5px 9px;
  padding: 3px;
  border-radius: 2px;
  box-shadow: $z-depth-2, inset 0 1px $highlight_color;
  background-color: $lighter_bg_color;

  button { @extend %simple_flat_button; }

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

%budgie_dialog {
  border-radius: 2px;
  background-color: $lighter_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;

    @extend %simple_flat_button;

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

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

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

  .message { color: $tertiary_fg_color; }

  .failure { color: $destructive_color; }
}

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

  background-color: $base_color;

  entry.search {
    font-size: 120%;
    padding: 0 + $container_padding 8px + $container_padding;
    box-shadow: inset 0 1px $highlight_color;
    background-color: transparent;
  }

  list .dim-label { opacity: 1; }

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