$overview_transparent_bg: transparentize(white, .9);
$dialog_box_shadow: 0 2px 6px -2px transparentize(black, .8);

// Dropshadow for large icons
.icon-dropshadow {
  icon-shadow: 0 1px 5px $shadow_color;
}

/* OSD */
%osd_panel {
  background-color: transparentize($osd_bg_color, 0.04);
  box-shadow: $dialog_box_shadow;
}

// buttons on OSD elements
// that are undecorated by default and use OSD colors
%osd_button {
  @include button(undecorated);
  border: 0!important;
  &:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color); }
  &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color); }
  &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color); }
  &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color); }
  &:outlined, &:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color); }
}

/* Switches */
.toggle-switch {
  height: 22px;
  width: 44px;
}

/* Slider */
.slider {
  -barlevel-background-color: $borders_color;
  -barlevel-border-width: 0;
  -slider-handle-radius: 0;
}

/* Check Boxes */

.check-box {
    StBin {
       background-image: url("assets/checkbox-off#{$asset_suffix}.svg");
    }

    &:focus StBin { background-image: url("assets/checkbox-off-focused#{$asset_suffix}.svg"); }
    &:checked StBin { background-image: url("assets/checkbox#{$asset_suffix}.svg"); }
    &:focus:checked StBin { background-image: url("assets/checkbox-focused#{$asset_suffix}.svg"); }
}

/* Switches */

.toggle-switch {
  background-image: url("assets/toggle-off#{$asset_suffix}.svg");
  &:checked {
    background-image: url("assets/toggle-on#{$asset_suffix}.svg");
  }
}

/* Popovers/Menus */
.popup-menu-boxpointer {
  -arrow-rise: if($full-panel == 'true', 8px, 10px);
}

.popup-menu-content {
  padding: 4px;
  box-shadow: $dialog_box_shadow;
  background-color: $base_color;
}

.popup-menu-item {
  border: 1px solid transparent;
  border-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 8px;
  padding-bottom: 8px;

  &:checked {
    border-color: $borders_color;
    background-color: $bg_color!important;
  }
}

.popup-sub-menu {
  background-color: $bg_color;
  border: 1px solid $borders_color;
  border-top: 0;

  .popup-menu-item {
    padding-top: 7px;
    padding-bottom: 7px;

    &:focus, &:hover { background-color: $hover_bg_color!important; }
    &:checked { background-color: $checked_bg_color!important; }
    &:active { background-color: $active_bg_color!important; }
  }
}

.popup-separator-menu-item { margin: 6px 0; }

/* Message List */
.message-list .message-list-placeholder,
.message-list-controls {
  font-weight: normal;
}

.message-list-controls {
  spacing: $base_padding * 2;
  @include fontsize(10);
}

.message {
  .message-content {
    padding: $base_padding;
    spacing: 0;
  }
  .message-title { padding-top: .5em; }
  .message-secondary-bin > .event-time { padding-bottom: .5em; }
}

/* Notifications & Message Tray */
.notification-banner { box-shadow: $dialog_box_shadow; }

/* Window Picker */
// Window titles
.window-caption {
  color: black;
  background-color: white;
  box-shadow: $dialog_box_shadow;
}

// Close button
.window-close {
  background-image: url("assets/close-window.svg");
  background-size: 32px;
  background-color: transparent;
  box-shadow: none;
  color: transparent;
  height: 32px;
  width: 32px;
  transition-duration: .2s;

  &:hover {
    background-image: url("assets/close-window-hover.svg");
    background-color: transparent;
  }

  &:active {
    background-image: url("assets/close-window-active.svg");
    background-color: transparent;
    color: transparent;
    transition-duration: 0s;
  }
}

/* Workspace Switcher */
.ws-switcher-indicator {
  padding: 2px;
  margin: 10px;

  &:active {
    padding: 4px;
    margin: 8px;
  }
}

/* Screenshot UI */
.screenshot-ui-shot-cast-container {
  background-color: lighten($osd_bg_color, 4%);
}

.screenshot-ui-shot-cast-button {
  background-color: transparent;
  &:hover, &:focus { background-color: lighten($osd_bg_color, 10%); }
  &:active { background-color: lighten($osd_bg_color, 15%); }
  &:checked { background-color: white; color: black; }
}

/* Top Bar */
#panelBox {
    padding: if($full-panel == 'true', 0, 5px 12px);
    background: transparent;
}

#panel {
  $_panel_fg: if($variant=='light', black, white);
  $_panel_text_shadow: 0 1px 2px transparentize(black, 0.7);
  background: transparentize($bg_color, .2);
  text-shadow: $_panel_text_shadow;

  @if ($full-panel != 'true') {
    border-radius: 7px;
    padding: 1px 0;
    font-size: 90%;
    background: transparentize($bg_color, .3);
  }

  StIcon { icon-shadow: $_panel_text_shadow; }

  &.unlock-screen,
  &.login-screen,
  &.lock-screen,
  &:overview {
    background-color: transparent;
    .panel-button {
      &, &:hover, &:active, &:focus, &:overview, &:checked { color: white; }
    }
  }

  .panel-button {
    color: $_panel_fg;
    &:hover, &:active, &:focus, &:overview, &:checked {
      color: $_panel_fg;
      box-shadow: inset 0 0 0 100px rgba(255, 255, 255, if($variant == 'light', 1, .2));
    }
    &.screen-recording-indicator { color: white; }
  }

  .panel-button.clock-display {
    // Move highlight from .panel-button to .clock
    &:hover, &:active, &:overview, &:focus, &:checked {
      box-shadow: none;

      .clock {
        box-shadow: inset 0 0 0 100px rgba(255, 255, 255, if($variant == 'light', 1, .2));
      }
    }
  }

  #panelActivities.panel-button {
    margin-left: .4em;
    StLabel {
      background-image: if($variant == 'light', url("assets/view-grid-symbolic-black.svg"),
                                          url("assets/view-grid-symbolic.svg"));
      background-size: contain;
      width: 1.5em;
      height: 1.5em;
      color: transparent;
    }

    &:overview StLabel {
      background-image: url("assets/view-grid-symbolic.svg");
    }
  }
}

#panel :first-child > :first-child > .panel-button:hover {
  border-radius: 8px;
}

#panel :last-child > :last-child > .panel-button:last-child {
  &:hover, &:active, &:focus, &:overview, &:checked {
    border-radius: 12px 8px 8px 12px;
  }
}


/* Date/Time Menu */
.datemenu-today-button {
  &:insensitive { color: inherit; }

  .day-label { font-weight: normal; }

  .date-label { font-weight: lighter; }
}

/* Search */
// search entry
.search-entry {
  $_text-shadow: 0px 1px 2px transparentize(black, 0.5);
  color: black;
  text-shadow: $_text-shadow;
  font-weight: bold;
  background-color: $overview_transparent_bg;
  font-size: 1.1em;
  transition-duration: 200ms;

  StLabel.hint-text { color: $osd_fg_color; }

  &, &:focus, &:hover {
    width: 21em;
    padding: .6em .8em;
    border: none;
  }

  &:focus, &:hover {
    background-color: white;
    color: black;
    font-weight: normal;
    box-shadow: none;
    text-shadow: none;

    StLabel.hint-text { color: black; }

    .search-entry-icon {
      color: black;
      icon-shadow: none;
    }
  }

  .search-entry-icon {
    color: white;
    icon-shadow: $_text-shadow;
  }
}

// search results
.search-section-content {
  background-color: $overview_transparent_bg;
  border: none;
}

// search result provider
.search-provider-icon .list-search-provider-details { font-weight: bold; }

.list-search-result .list-search-result-description {
  color: transparentize($osd_fg_color, .2);
}

/* Dash */
#dash {
  color: $osd_fg_color;

  StIcon {
    icon-shadow: 0 2px 6px transparentize(black, .6);
  }
}

.dash-background, .dash-separator { background: $overview_transparent_bg; }

/* App Grid */
// Icon tiles in the app grid
.app-well-app { color: white; }

.app-folder-dialog {
  background: black;
  box-shadow: 0 0 20px lighten(black, 1%);
}

/* Screen Shield */

#lockDialogGroup {
    background: url("assets/login-background");
    background-size: cover;
}

/* Login Dialog */

.login-dialog,
.unlock-dialog {
    $_login_button_bg: transparentize(#383c4a, .65);

    font-size: 11pt;

    StEntry {
        background: $_login_button_bg;
        color: white;
        border: none;
        box-shadow: none;

        StLabel.hint-text {
            margin-left: 2px;
            color: transparentize(white, 0.3);
        }
    }

    .cancel-button,
    .switch-user-button,
    .login-dialog-session-list-button {
        border-color: transparent;
        background-color: $_login_button_bg;
        color: white;

        StIcon { icon-size: $base_icon_size; }
    }
}
