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

$panel_transition_duration: 250ms; // same as the overview transition duration

%activities_icon {
  background-image: url("assets/activities.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto;
  color: transparent !important;
  font-size: 0;
  box-shadow: none;

  * {
    width: $medium_size;
  }

  .workspace-dot {
    background-color: transparent;
  }
}

%activities_default {
  -natural-hpadding: $container_padding * 2.5;

  & StBoxLayout {
    spacing: $container_padding;
  }

  & .workspace-dot {
    border-radius: $circular_radius;
    min-width: 8px;
    min-height: 8px;
    background-color: $panel_fg_color;
  }
}

#panel {
  font-weight: normal;
  font-feature-settings: "tnum";
  transition-duration: $panel_transition_duration;
  border: none;
  box-shadow: none;

  @if $window == 'round' {
    padding: 0 2px !important;
  }

  @if $opacity == 'solid' {
    background-color: $panel_bg;
  } @else {
    background-color: $panel_bg_color;
  }

  @if $panel_style == 'compact' {
    margin: 0;
    border-radius: 0;
    height: $medium_size - 2px;
  } @else {
    border-radius: $material_radius;
    margin: $container_padding / 2;
    height: $medium_size + 2px;
  }

  #panelLeft, #panelCenter { // spacing between activities<>app menu and such
    spacing: 0;
  }

  // the rounded outset corners
  .panel-corner {
    -panel-corner-radius: $panel-corner-radius;
    -panel-corner-background-color: $panel_bg_color;
    -panel-corner-border-width: 0;
    -panel-corner-border-color: transparent;
    -panel-corner-opacity: 0;
    transition-duration: $panel_transition_duration;
  }

  // panel menus
  .panel-button {
    -natural-hpadding: $minimum_hpadding * 2;
    -minimum-hpadding: $minimum_hpadding * 2;
    font-weight: normal;
    color: $panel_secondary_fg_color;
    transition-duration: 150ms;
    text-shadow: none;

    @if $window == 'round' {
      border: 1px solid transparent;
      border-radius: $buttons_radius;
      box-shadow: inset 0 1px transparent;
      margin: 2px 1px;
    } @else {
      border: none;
      border-radius: 0;
    }

    StLabel { padding: 0; }

    &.clock-display {
      .clock {
        color: $panel_secondary_fg_color;
        transition-duration: 150ms;
        border: none;
        border-radius: 0;
      }
    }

    &:hover {
      color: $panel_secondary_fg_color;
      background-color: $panel_divider_color;
    }

    &:active, &:checked, &:focus {
      color: $panel_fg_color;
      background-color: $panel_track_color;
    }

    &:hover, &:active, &:overview, &:focus, &:checked {
      text-shadow: none;

      @if $window == 'round' {
        border: 1px solid $panel_border_color;
        box-shadow: inset 0 1px $panel_highlight_color;
      } @else {
        box-shadow: none;
      }

      // The clock display needs to have the background on .clock because
      // we want to exclude the do-not-disturb indicator from the background
      &.clock-display {
        .clock {
          box-shadow: none;
          background: none;
          color: $panel_fg_color;
        }
      }
    }

    // status area icons
    .system-status-icon {
      icon-size: 16px;
      padding: $container_padding;
      margin: 0 $container_padding / 2;
    }

    // .panel-status-indicators-box .system-status-icon,
    .panel-status-menu-box .system-status-icon { margin: 0 0; }
    .panel-status-menu-box StLabel { padding: 0 0 0 $container_padding / 2; }

    .appindicator-trayicons-box { margin: 0 $container_padding; }

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

    // app menu icon
    .app-menu-icon {
      -st-icon-style: symbolic;
      // dimensions of the icon are hardcoded
    }

    &#panelActivities {
      @if $activities == 'icon' {
        @extend %activities_icon;
      } @else {
        @extend %activities_default;
      }
    }
  }

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

    .panel-button {
      border-radius: $buttons_radius;
      color: $inverse_secondary_fg_color;
      background-color: transparent;

      &.clock-display {
        .clock {
          color: $inverse_secondary_fg_color;
        }
      }

      &:hover {
        background-color: $inverse_divider_color;
      }

      &:active, &:checked, &:focus {
        background-color: $inverse_track_color;
      }

      @if $window == 'round' {
        &:hover, &:active, &:overview, &:focus, &:checked {
          border: 1px solid $icon_border_color;
          box-shadow: inset 0 1px $icon_highlight_color;
        }
      }

      &#panelActivities {
        box-shadow: none;
        border: none;
        background-color: transparent;

        &:hover {
          background-color: $inverse_divider_color;
        }

        @if $activities == 'icon' {
          @if $variant == 'light' and $panel == 'light' {
            background-image: url("assets/activities-white.svg") !important;
          }
        } @else {
          & .workspace-dot {
            background-color: $inverse_fg_color;
          }
        }
      }
    }

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

  Gjs_ui_panel_AggregateMenu.panel-button {
    .system-status-icon {
      margin: 0 0 !important;
      padding: $container_padding !important;
    }
  }

  @if $panel_style == 'float' {
    Gjs_ArcMenu_ApplicationsButton.panel-button,
    Gjs_arcmenu_arcmenu_com_menuButton_ArcMenu_MenuButton.panel-button,
    Gjs_arcmenu_arcmenu_com_menuButton_Arc_Menu_MenuButton.panel-button,
    Gjs_arc-menu_linuxgem33_com_menuButton_ArcMenu_MenuButton.panel-button,
    Gjs_ui_panel_ActivitiesButton.panel-button { // Activities button
      border-radius: $material_radius 0 0 $material_radius !important;
    }

    Gjs_AggregateMenu.panel-button,
    Gjs_ui_panel_AggregateMenu.panel-button {
      border-radius: 0 $material_radius $material_radius 0 !important;
    }

    &:overview,
    &.unlock-screen,
    &.login-screen,
    &.lock-screen {
      Gjs_ArcMenu_ApplicationsButton.panel-button,
      Gjs_arcmenu_arcmenu_com_menuButton_Arc_Menu_MenuButton.panel-button,
      Gjs_arc-menu_linuxgem33_com_menuButton_ArcMenu_MenuButton.panel-button,
      Gjs_ui_panel_ActivitiesButton.panel-button,
      Gjs_AggregateMenu.panel-button,
      Gjs_ui_panel_AggregateMenu.panel-button {
        border-radius: $buttons_radius !important;
      }
    }
  }

  @if $window == 'round' {
    Gjs_ArcMenu_ApplicationsButton.panel-button,
    Gjs_arcmenu_arcmenu_com_menuButton_Arc_Menu_MenuButton.panel-button,
    Gjs_arc-menu_linuxgem33_com_menuButton_ArcMenu_MenuButton.panel-button,
    Gjs_ui_panel_ActivitiesButton.panel-button { // Activities button
      margin-left: $container-padding / 2;
    }

    Gjs_AggregateMenu.panel-button,
    Gjs_ui_panel_AggregateMenu.panel-button {
      margin-right: $container-padding / 2;
    }
  }

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

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

#appMenu .panel-status-menu-box {
  padding: 0 $container_padding;
  spacing: $container_padding;
}
