/* Use the gnome-shell theme, but with light colors */
$variant: 'light';

@import "gnome-shell-sass/_colors"; //use gtk colors
@import "gnome-shell-sass/_drawing";
@import "gnome-shell-sass/_common";

/* Overrides */

#panel {
  font-weight: normal;
  background-color: $bg_color;
  background-gradient-direction: vertical;
  background-gradient-end: darken($bg_color,5%);
  border-top-color: #666; /* we don't support non-uniform border-colors and
                             use the top border color for any border, so we
                             need to set it even if all we want is a bottom
                             border */
  border-bottom: 1px solid #666;
  app-icon-bottom-clip: 0px;
  &:overview {
    background-color: #000;
    background-gradient-end: #000;
    border-top-color: #000;
    border-bottom: 1px solid #000;
    .panel-button { color: #fff; }
  }

  .panel-button {
    -natural-hpadding: 8px;
    -minimum-hpadding: 4px;
    font-weight: normal;
    color: $fg_color;
    &:active, &:overview, &:focus, &:checked {
      // Trick due to St limitations. It needs a background to draw
      // a box-shadow
      background-color: $selected_bg_color !important;
      color: $selected_fg_color !important;
      box-shadow: none;
      & > .system-status-icon { icon-shadow: none; }
    }
    .app-menu-icon { width: 0; height: 0; margin: 0; } // shell's display:none; :D
  }

  .panel-corner,
  .panel-corner:active,
  .panel-corner:overview,
  .panel-corner:focus {
    -panel-corner-radius: 0;
  }
  &.lock-screen,
  &.unlock-screen, 
  &.login-screen { 
    background-color: transparentize($_bubble_bg_color, 0.5);
    background-gradient-start: transparentize($_bubble_bg_color, 0.5);
    background-gradient-end: transparentize($_bubble_bg_color, 0.5);
    border-bottom: none;
    .panel-button { color: $osd_fg_color; }
  }
  .popup-menu-arrow { width: 0; height: 0;  } // shell's display: none;
}

#appMenu { 
  padding: 0 8px 0 8px; 
  spinner-image: url("classic-process-working.svg"); 
}
.tile-preview-left.on-primary,
.tile-preview-right.on-primary,
.tile-preview-left.tile-preview-right.on-primary {
    /* keep in sync with -panel-corner-radius */
    border-radius: 0;
}



@each $v in us, intl {
  .toggle-switch-#{$v} {
    background-image: url("classic-toggle-off-#{$v}.svg");
    &:checked { background-image: url("classic-toggle-on-#{$v}.svg"); }
  }
}