/* Top Bar */

$panel_height: 2.1em;

#panel {
  font-weight: normal;
  height: $panel_height;
  background-color: $panel_bg;
  border: none;
  font-feature-settings: "tnum";
  transition-duration: 250ms;

  // Fix dynamic top bar extension
  &.dynamic-top-bar-white-btn { border-image: none; }

  // 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: 6px;
  }

  // the rounded outset corners
  .panel-corner {
    -panel-corner-radius: 0;
    -panel-corner-background-color: $panel_bg;
    -panel-corner-border-width: 0;
    -panel-corner-border-color: transparent;

    &:active, &:overview, &:focus {
      -panel-corner-border-color: lighten($selected_bg_color, 5%);
    }
  }

  // panel menus
  .panel-button {
    -natural-hpadding: 10px;
    -minimum-hpadding: 6px;
    font-weight: normal;
    color: $panel_fg;
    transition-duration: 150ms;
    text-shadow: none;
    border: none;
    border-bottom: 2px solid transparent;
    box-shadow: none;
    border-radius: 0;

    &:hover, &:focus {
      color: $panel_fg;
      background-color: rgba($panel_fg, 0.08);
      box-shadow: none;
      border-radius: 0;
    }

    &:active, &:checked {
      color: $panel_fg;
      background-color: rgba($panel_fg, 0.16);
      border-color: $selected_bg_color;
      border-radius: 0;

      & > .system-status-icon { icon-shadow: none; }
    }

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

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

      &:hover, &:focus {
        color: $panel_fg;
        background-color: rgba($panel_fg, 0.08) !important;
        box-shadow: none;
      }

      &:active, &:checked {
        color: $panel_fg;
        background-color: rgba($panel_fg, 0.16) !important;
        box-shadow: none;
        border-color: $selected_bg_color !important;
      }

      &, &:active, &:hover, &:focus, &:checked {
        .clock { //reset
          background-color: transparent;
          box-shadow: none
        }
      }
    }

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

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

    // app menu icon
    .app-menu-icon {
      width: 0;
      height: 0;
      margin-left: 0px;
      margin-right: 0px;
      -st-icon-style: symbolic;
      // dimensions of the icon are hardcoded
    }

    // screen activity indicators
    &.screen-recording-indicator,
    &.screen-sharing-indicator {
      StIcon {
        icon-size: $scalable_icon_size;
      }
    }

    &.screen-recording-indicator {
      @include panel_button($bg:$recording_indicator_color, $style: filled);
    }

    &.screen-sharing-indicator {
      @include panel_button($bg:$privacy_indicator_color, $style: filled);
    }
  }

  // lock & login screen styles
  &.unlock-screen,
  &.login-screen,
  &.lock-screen,
  &:overview {
    background: none;
    color: lighten($panel_fg, 10%);

    .panel-button {
      &:hover, &:active, &:overview, &:focus, &:checked {
        &.clock-display {
          .clock {
            box-shadow: none;
          }
        }
      }

      .panel-button {
        &.screen-recording-indicator {
          @include panel_button($bg:$recording_indicator_color, $style: filled);
        }

        &.screen-sharing-indicator {
          @include panel_button($bg:$privacy_indicator_color, $style: filled);
        }
      }
    }
  }

  .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
  .privacy-indicator,
  .remote-access-indicator,
  .screencast-indicator {
    color: $privacy_indicator_color;
  }

  .popup-menu-arrow {
    width: 0;
    height: 0;
  }
}

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

// Activities button
#panel #panelActivities.panel-button {
  // > * {
  //   background-image: url("assets/activities.svg");
  //   width: 24px;
  //   height: 24px;
  //   background-color: transparent !important;
  //   background-gradient-direction: none !important;
  //   border: none;
  //   color: transparent;
  // }

  // &:hover {
  //   background-color: rgba($panel_fg, 0.05) !important;
  // }

  // &:active, &:focus {
  //   background-color: rgba($panel_fg, 0.1) !important;
  // }

  -natural-hpadding: 16px;

  & StBoxLayout {
    spacing: 6px;
  }

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