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

$panel_corner_radius: 0;
$panel_height: 2.2em;
$panel_transition_duration: 250ms; // same as the overview transition duration

#panel {
  background-color: $panel_bg_color;
  font-weight: bold;
  height: $panel_height;
  font-feature-settings: "tnum";
  transition-duration: $panel_transition_duration;
  @include fontsize($base_font_size - 1);

  // 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_bg_color;
    -panel-corner-border-width: 2px;
    -panel-corner-border-color: transparent;
    -panel-corner-opacity: 1;
    transition-duration: $panel_transition_duration;
  }

  // panel menus
  .panel-button {
    font-weight: bold;
    color: $panel_fg_color;
    -natural-hpadding: $base_padding * 2;
    -minimum-hpadding: $base_padding * 2;
    transition-duration: 150ms;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    text-shadow: none;

    &.clock-display {
      border: none;
      border-bottom: 3px solid transparent !important;

      .clock {
        transition-duration: 150ms;
        border: 0 none transparent;
        border-radius: 0;
      }

      &:active, &:overview, &:checked, &:focus {
        background-color: rgba(#ffffff, 0.15) !important;
        border-color: $selected_bg_color !important;
        box-shadow: none !important;
      }
    }

    &:hover, &:active, &:overview, &:focus, &:checked {
      border-image: none;
    }

    &:hover {
      background-color: rgba(#ffffff, 0.08);
      box-shadow: none;
    }

    &:active, &:overview, &:checked, &:focus {
      background-color: rgba(#ffffff, 0.15);
      border-color: $selected_bg_color;
      box-shadow: none !important;
      text-shadow: none;
    }

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

    // .panel-status-indicators-box .system-status-icon,
    // .panel-status-menu-box .system-status-icon {
    //   margin: 0;
    // }

    // .panel-status-indicators-box,
    // .panel-status-menu-box {
    //   spacing: 0;
    // }

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

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

    &#panelActivities {
      -natural-hpadding: $base_padding * 3;

      & StBoxLayout {
        spacing: 5px;
      }

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

  // Input indicators
  Gjs_status_keyboard_InputSourceIndicator.panel-button, // Ibus
  Gjs_appindicatorsupport_rgcjonas_gmail_com_indicatorStatusIcon_AppIndicatorsIndicatorStatusIcon.panel-button { // Fcitx
    -natural-hpadding: $base_padding * 3 !important;
    -minimum-hpadding: $base_padding * 3 !important;
  }

  &.unlock-screen,
  &.login-screen,
  &:overview {
    .panel-button {
      &:hover, &:active, &:overview, &:focus, &:checked {
        &.clock-display {
          .clock {
            box-shadow: none !important;
            border: none !important;
          }
        }
      }
    }
  }

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

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

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