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

$panel_transition_duration: 250ms; // same as the overview transition duration
$panel_height: if($panel_style == 'compact', $medium-size - 2px, $medium-size + 2px);
$panel_button_hpadding: ($panel_height - $base-icon-size) / 2;

#panel {
  font-weight: bold;
  font-feature-settings: "tnum";
  padding: 0 !important;
  transition-duration: $panel_transition_duration;
  height: $panel_height;
  border: none;
  box-shadow: none;

  @if $opacity == 'solid' {
    background-color: $panel-solid;
  } @else {
    background-color: $shell;
  }

  @if $panel_style == 'compact' {
    margin: 0;
    border-radius: 0;
  } @else {
    margin: $space-size / 2;
    border-radius: if($corner_style == 'circular', $circular-radius, $material-radius + $space-size / 2);
  }

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

    .panel-corner {
      -panel-corner-opacity: 0;
    }
  }

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

  %icon_activities {
    background-image: url("assets/activities.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    width: 24px;
    height: 24px;
    color: transparent !important;
    background-color: transparent !important;
    font-size: 0;
    -natural-hpadding: $space-size / 2 !important;
    -minimum-hpadding: $space-size / 2 !important;

    > * {
      width: $panel_height - $space-size;
      // background-color: on($panel-solid, divider) !important;
      // border-radius: $circular-radius;
    }

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

  %normal_activities {
    -natural-hpadding: $space-size * 2.5;

    StBoxLayout {
      spacing: $space-size;
    }

    .workspace-dot {
      border-radius: $circular-radius;
      min-width: 8px;
      min-height: 8px;
      background-color: on($panel-solid);
    }
  }

  // panel menus
  .panel-button {
    font-weight: bold;
    color: on($panel-solid);
    -natural-hpadding: $panel_button_hpadding;
    -minimum-hpadding: $panel_button_hpadding;
    transition-duration: 150ms;
    border: $space-size / 2 solid transparent;
    border-radius: if($corner_style == 'circular', $circular-radius, $material-radius + $space-size / 2);
    margin: 0;

    &.clock-display {
      -natural-hpadding: 0 !important;
      -minimum-hpadding: 0 !important;
      padding: 0 !important;
      spacing: 0 !important;

      .clock-display-box {
        spacing: 0;
      }

      .clock {
        border-radius: if($corner_style == 'circular', $circular-radius, $material-radius + $space-size / 2);
        padding: 0 $space-size * 2 !important;
      }
    }

    &:hover {
      background-color: transparent;
      box-shadow: inset 0 0 0 1000px on($panel-solid, divider);

      // 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 {
        box-shadow: none;
        background-color: transparent;

        .clock {
          box-shadow: inset 0 0 0 1000px on($panel-solid, divider);
        }
      }
    }

    &:active, &:overview, &:focus, &:checked {
      background-color: transparent;
      box-shadow: inset 0 0 0 1000px on($panel-solid, track);

      // 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 {
        box-shadow: none;
        background-color: transparent;

        .clock {
          box-shadow: inset 0 0 0 1000px on($panel-solid, track);
        }
      }
    }

    // status area icons
    .system-status-icon {
      icon-size: $base-icon-size;
      padding: $space-size;
      margin: 0;
    }

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

    // .appindicator-box {
    //   margin: 0 3px;
    // }

    // .system-tray-icons {
    //   padding: $space-size;
    // }

    // .panel-status-indicators-box {
    //   spacing: $space-size;
    //
    //   .system-status-icon {
    //     padding: $space-size / 2;
    //   }
    // }

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

    .panel-status-menu-box { // indicators and menubutton icons
      spacing: $space-size;
      padding: $space-size;
      margin: 0;

      .system-status-icon {
        padding: 0;
      }
    }

    // app menu icon
    .app-menu-icon {
      -st-icon-style: symbolic;
    }

    // Gjs_ui_panelAppMenuButton.panel-button {
    //   .panel-status-menu-box {
    //     spacing: 0;
    //     padding: 0;
    //   }
    // }

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

  // Gjs_ui_panel_AggregateMenu.panel-button,
  Gjs_arcmenu_arcmenu_com_menuButton_Arc_Menu_MenuButton.panel-button,
  Gjs_arcmenu_arcmenu_com_menuButton_ArcMenu_MenuButton.panel-button,
  Gjs_arcmenu_arcmenu_com_menuButton_ArcMenuMenuButton.panel-button {
    border: 0 none transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    -natural-hpadding: $space-size / 2 !important;
    -minimum-hpadding: $space-size / 2 !important;

    .panel-status-menu-box {
      spacing: 0;
      padding: 0;
      margin: 0;
    }
  }

  Gjs_arcmenu_arcmenu_com_menuButton_Arc_Menu_MenuButton.panel-button,
  Gjs_arcmenu_arcmenu_com_menuButton_ArcMenu_MenuButton.panel-button {
    .arc-menu-icon {
      border-radius: if($corner_style == 'circular', $circular-radius, $material-radius);
      width: $panel_height - $space-size + 1px;
      margin: $space-size / 2 0;

      &:hover {
        background-color: on(dark, divider);
        box-shadow: none;
      }

      &:active, &:overview, &:focus, &:checked {
        background-color: on(dark, track);
        box-shadow: none;
      }
    }
  }

  Gjs_arcmenu_arcmenu_com_menuButton_ArcMenuMenuButton.panel-button {
    .arcmenu-menu-button {
      border-radius: if($corner_style == 'circular', $circular-radius, $material-radius);
      // width: $panel_height - $space-size + 1px;
      margin: $space-size / 2 0;
      padding: 0 ($panel_height - 16px - $space-size) / 2;

      &:hover {
        background-color: on(dark, divider);
        box-shadow: none;
      }

      &:active, &:overview, &:focus, &:checked {
        background-color: on(dark, track);
        box-shadow: none;
      }
    }
  }

  // Gjs_ui_panel_AggregateMenu.panel-button { }

  // Input indicators
  Gjs_status_keyboard_InputSourceIndicator.panel-button, // Ibus
  Gjs_appindicatorsupport_rgcjonas_gmail_com_indicatorStatusIcon_IndicatorStatusIcon.panel-button,
  Gjs_appindicatorsupport_rgcjonas_gmail_com_indicatorStatusIcon_AppIndicatorsIndicatorStatusIcon.panel-button { // Fcitx
    -natural-hpadding: $panel_button_hpadding + $space-size !important;
    -minimum-hpadding: $panel_button_hpadding + $space-size !important;
  }

  // Gjs_status_accessibility_ATIndicator.panel-button {
  //   -natural-hpadding: 3px !important;
  //   -minimum-hpadding: 3px !important;
  // }

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

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

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