$popover_bubble_bg: if($variant == 'light', rgba(white, 0.95), rgba(lighten($base_color, 8%), 0.95));

%popover_bubble {
  color: $alt_fg_color;
  background-color: $popover_bubble_bg;
  border-radius: $mn_radius;
  border: none;
  box-shadow: none;
  text-shadow: none;

  &:hover, &:focus {
    color: $fg_color;
    background-color: if($variant == 'light', rgba($popover_bubble_bg, 1), rgba(lighten($popover_bubble_bg, 5%), 1));
    box-shadow: 0 3px 5px rgba(black, 0.1);
  }

  &:active {
    color: $fg_color;
    background-color: if($variant == 'light', darken($popover_bubble_bg, 1%), lighten($popover_bubble_bg, 3%));
    box-shadow: none;
  }
}

%show_apps_bigsur {
  .show-apps-icon {
    color: transparent;
    background-image: url("assets/view-app-grid.svg");
    background-size: contain;
  }

  .overview-icon { color: transparent; }

  &:hover,
  &:active,
  &:checked,
  &:focus {
    .show-apps-icon { color: transparent; }
  }
}

%osd_panel {
  color: $fg_color;
  background-color: $base_color;
  border: 1px solid if($variant=='light', rgba(black, 0), rgba(black, 0.75));
  box-shadow: 0 3px 8px 0 rgba(black, 0.25);
  border-radius: $bt_radius;
  padding: 12px;
}

%search-section-content-item {
  border-radius: $bt_radius;
  padding: $base_padding;
  transition-duration: 100ms;
  text-align: center;

  &:focus,
  &:hover,
  &:selected {
    background-color: $light_divider_color;
    transition-duration: 200ms;
  }

  &:active,
  &:checked {
    background-color: $light_track_color;
  }
}

// links
.shell-link {
  border-radius: $bt_radius;
  color: $link_color;
  &:hover {
    color: $link_color;
    background-color: rgba($link_color, $lower_opacity / 2);
  }
  &:active {
    color: $link_color;
    background-color: rgba($link_color, $lower_opacity);
  }
}

// Outline for low res icons
.lowres-icon {
  icon-shadow: 0 1px 2px rgba(black, 0.3);
}

// Dropshadow for large icons
.icon-dropshadow {
  icon-shadow: 0 1px 5px rgba(black, 0.8);
}