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

/* OSD */
$_osd_color: if($variant=='light', black, $fg_color);
%osd_panel {
    font-weight: bold;
    background-color: $bg_color;
    color: $fg_color;
    border: 2px solid $borders_color;
    box-shadow: 0 4px 10px transparentize(black, .8);

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

.osd-window {
    .level {
        -barlevel-background-color: transparentize($_osd_color, if($variant=='light', 0.7, 0.9));
        -barlevel-active-background-color: $_osd_color;
    }
}

/* Slider */

.slider {
    height: 1.1em;
    -barlevel-height: .35em;
    -barlevel-background-color: $borders_color;
    -barlevel-border-color: $selected_bg_color;
    -barlevel-active-background-color: $selected_bg_color;
    -barlevel-overdrive-color: $destructive_color;
    -barlevel-overdrive-separator-width: 0.1em;
    -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,
.candidate-popup-boxpointer {
    -arrow-border-radius: $base_border_radius + 4px;
    -arrow-background-color: $base_color;
    -arrow-border-width: 12px;
    -arrow-border-color: transparent;
    -arrow-base: 0;
    -arrow-rise: 0;
    margin: if($full-panel == 'true', .2em, .45em);
    background-color: transparentize($bg_color, .6);
    box-shadow: 0 2px 4px -6px transparentize(black, .8);
    border-radius: $base_border_radius + 8px;
}

// menu items
.popup-menu-item {
    border-radius: $base_border_radius;

    &:checked { background-color: transparent; }

    &.selected, &:active {
        background-color: $popover_hover_color;
        color: $fg_color;
    }
}

// popover submenus
.popup-sub-menu {
    border: 1px solid $borders_color;
    background-color: $bg_color;
    border-radius: $base_border_radius;
}

/* App Switcher */
// switcher onscreen panel
.switcher-list {
    .item-box {
        &:outlined {
            padding: 6px;
            border: 3px solid $selected_bg_color;
        }

        &:selected {
            background-color: $selected_bg_color;
            color: $selected_fg_color;
            text-shadow: 0 1px 4px transparentize(black, 0.6);
        }
    }
}

/* Workspace Switcher */
.ws-switcher-box { border: none }

.workspace-switcher-container { padding: 7px; }

// active workspace in the switcher
.ws-switcher-active-up,
.ws-switcher-active-down,
.ws-switcher-active-left,
.ws-switcher-active-right {
    //box-shadow: 0 0px 6px transparentize(black, .5);
}

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

/* Tiled window previews */

.tile-preview-left.on-primary,
.tile-preview-right.on-primary,
.tile-preview-left.tile-preview-right.on-primary{ border-radius: 0; }

/* TOP BAR */

#panelBox {
    padding: if($full-panel == 'true', 0, .35em .9em);
    background: transparent;
}

#panel {
    $_panel_bg: transparentize(black, .8);
    $_panel_fg: white;
    $_panel_text_shadow: 0 1px 2px transparentize(black, 0.3);
    padding: if($full-panel == 'true', .1em 0, 0);
    font-size: .9em;
    height: 2em;
    border-radius: if($full-panel == 'true', 0, 7px);
    background: $_panel_bg;
    text-shadow: $_panel_text_shadow;

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

    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-corner { -panel-corner-radius: 0; }

    .panel-button {
        color: $_panel_fg;
        &:active, &:focus, &:overview, &:checked {
            color: $_panel_fg;
            box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20);
        }
    }

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

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

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

/* Date/Time Menu */

.events-section-title { padding: 1em; }

.datemenu-today-button {
    .date-label {
        font-size: 1.5em;
        font-weight: 300;
    }
}

.calendar {
  .pager-button {
    &:hover, &:focus { background-color: $popover_hover_color }
  }

  .calendar-day-base {
    &:hover, &:focus,
    &:active,&:selected {
      color: $fg_color;
      background-color: $popover_hover_color;
    }
  }

  .calendar-today {
    &:hover,&:focus {
      background-color: $popover_hover_color;
      color: $fg_color;
    }
    &:active,&:selected {
      background: $selected_bg_color;
      color: $selected_fg_color;
      &:hover,&:focus {
        background-color: $popover_hover_color;
        color: $fg_color;
      }
    }
  }
}


/* Search */

// search entry
.search-entry {
    color: black;
    text-shadow: 0px 1px 2px rgba(black, 0.9);
    font-weight: bold;
    background-color: $overview_transparent_bg;
    border-radius: 999px;
    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: 0px 1px 2px rgba(black, 0.9);
    }
}

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

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

/* DASHBOARD */

#dash {
    color: $osd_fg_color;
    background-color: transparent;
    border: none;
    border-color: transparent;

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

.dash-background {
  background: $overview_transparent_bg;
  //box-shadow: 0 2px 8px 0 transparentize(black, .2);
}

.dash-separator { background: $overview_transparent_bg; }

.show-apps {
    &:focus,
    &:checked {
        .overview-icon {
            background-color: $overview_transparent_bg;
            color: black;
        }
    }
}

/* App Folders */
.app-well-app.app-folder {
    &, & .overview-icon.overview-icon-with-label {
      background-color: $overview_transparent_bg
    }
    //box-shadow: 0 2px 5px black;

    &:checked { background: black; }
}

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

    & .folder-name-container {
        & .edit-folder-button {
            &, &:hover, &:active {
                background: white;
                color: black;
            }
        }
    }
}

.app-folder-dialog-container { width: 720px; }

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