/* Top Bar */
// a.k.a. the panel

$panel_corner_radius: $base_border_radius+1;
$panel_fg_color: #ccc;
$panel_height: 1.86em;
$panel_button_margin: 3px;
$panel_icon_padding: 3px;
$lock_panel_shadow: 0px 0px 10px 1px black;


#panel {
  background-color: $panel_bg_color;
  font-weight: bold;
  height: $panel_height;
  font-feature-settings: "tnum";

  // transparent panel on lock & login screens
  &.unlock-screen,
  &.login-screen {
    background-color: transparent;

    .panel-corner {
      -panel-corner-radius: 0;
      -panel-corner-background-color: transparent;
      -panel-corner-border-color: transparent;
    }
  }

  // spacing between activities, app menu and such
  #panelLeft, #panelCenter {
    spacing: $base_spacing;
  }

  // the rounded outset corners
  .panel-corner {
    -panel-corner-radius: $panel_corner_radius;
    -panel-corner-background-color: $panel_bg_color;
    -panel-corner-border-width: 2px;
    -panel-corner-border-color: transparent;
  }

  // panel menus
  .panel-button {
    border: $panel_button_margin solid transparent; // "crops" the "background"
    border-radius: 99px;
    font-weight: bold;
    color: $panel_fg_color;
    -natural-hpadding: $base_padding * 2;
    -minimum-hpadding: $base_padding;

    &.clock-display {
      .clock {
        padding: 0 10px;
        border: $panel_button_margin solid transparent;
        border-radius: 99px;
      }
    }

    &:hover {
      color: lighten($panel_fg_color, 20%);
    }

    &:active, &:overview, &:focus, &:checked {
      // Trick due to St limitations. It needs a background to draw a box-shadow
      background-color: rgba($panel_fg_color, 0.01);
      color: lighten($panel_fg_color, 20%);
      box-shadow: inset 0 0 0 100px rgba($panel_fg_color, 0.3);

      &.clock-display {
        background: none;
        box-shadow: none;

        .clock {
          background-color: rgba($panel_fg_color, 0.01);
          color: lighten($panel_fg_color, 20%);
          box-shadow: inset 0 0 0 100px rgba($panel_fg_color, 0.3);
        }
      }
    }



    // status area icons
    .system-status-icon {
      icon-size: $base_icon_size;
      padding: $base_padding - $panel_icon_padding;
    }
  }

  .panel-status-indicators-box,
  .panel-status-menu-box {
    spacing: 2px;
  }

  // spacing between power icon and (optional) percentage label
  .power-status.panel-status-indicators-box {
    spacing: 0;
  }

  // indicator for active
  .screencast-indicator,
  .remote-access-indicator { color: $warning_color; }
}

// App Menu
#appMenu {
  spacing: $base_spacing;
  .label-shadow { color: transparent; }
}
