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

$panel_bg_color: #000;
$panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 5%));
$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;
  @extend %numeric;
  transition-duration: $panel_transition_duration;

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

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

    &.clock-display {
      .clock {
        transition-duration: 150ms;
        border: 3px solid transparent;
        border-radius: 99px;
      }
    }

    &.screen-recording-indicator {
      box-shadow: inset 0 0 0 100px $screenshot_ui_button_red;
    }
    &.screen-sharing-indicator {
      box-shadow: inset 0 0 0 100px $warning_color;
      StBoxLayout { margin: 0 $base_padding; }
    }

    &.screen-recording-indicator,
    &.screen-sharing-indicator {
      StBoxLayout {
        spacing: $base_padding;
      }

      StIcon {
        icon-size: $base_icon_size;
      }
    }

    &:active, &:overview, &:focus, &:checked {
      box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);

      // 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;

        .clock {
          box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
        }
      }

      &.screen-recording-indicator {
        box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
      }
      &.screen-sharing-indicator {
        box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.15);
      }
    }

    &:hover {
      box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
      &.clock-display {
        box-shadow: none;
        .clock {
          box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
        }
      }

      &.screen-recording-indicator {
        box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
      }
      &.screen-sharing-indicator {
        box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
      }
    }
    
    &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
      box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
      &.clock-display {
        box-shadow: none;
        .clock {
          box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
        }
      }

      &.screen-recording-indicator {
        box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
      }
      &.screen-sharing-indicator {
        box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.2);
      }
    }

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

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

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

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

  &.unlock-screen,
  &.login-screen,
  &:overview {
    .panel-button {
      &:active, &:overview, &:focus, &:checked {
        box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15);

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

          .clock {
            box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15);
          }
        }

        &.screen-recording-indicator {
          box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
        }
        &.screen-sharing-indicator {
          box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.15);
        }
      }

      &:hover {
        box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
        &.clock-display {
          box-shadow: none;
          .clock {
            box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
          }
        }

        &.screen-recording-indicator {
          box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
        }
        &.screen-sharing-indicator {
          box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
        }
      }
      
      &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
        box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
        &.clock-display {
          box-shadow: none;
          .clock {
            box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
          }
        }

        &.screen-recording-indicator {
          box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
        }
        &.screen-sharing-indicator {
          box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.2);
        }
      }
    }
  }

  .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_padding;
  .label-shadow { color: transparent; }
}

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


// Clock

.clock-display-box {
  spacing: 2px;

  .clock {
    padding-left: $base_padding * 2;
    padding-right: $base_padding * 2;
  }
}