// /*************************
//  * VolumeMixer Extension *
//  *************************/

.masterslider.smaller {
  .masterlabel,
  .slider {
    min-width: 0.6em;
  }
}

// /*************************
//  * OpenWeather Extension *
//  *************************/

.openweather {
  &-button,
  &-button-action,
  &-menu-button-container,
  &-button-box {
    border: 1px solid transparent;
    background: none;

    &:hover { border: 1px solid $selected_bg_color; }
  }

  &-provider {
    // generic text buttons are allocated with y-expand-ed
    padding: 0 16px;
    font-weight: 500;
    @include button(normal);
    &:hover { @include button(hover); }
    &:focus { @include button(focus); }
    &:active { @include button(active); }
    &:insensitive { @include button(insensitive); }
  }

  &-current {
    &-icon,
    &-summary,
    &-summarybox {
      background: none;
      color: $fg_color;
      -st-icon-style: symbolic;
    }

    &-databox-values {
      background: none;
      color: $sec_fg_color;
    }

    &-databox-captions {
      background: none;
      color: $sec_fg_color;
    }
  }

  &-forecast {
    &-icon,
    &-summary {
      background: none;
      color: $alt_fg_color;
      -st-icon-style: symbolic;
    }

    &-day {
      background: none;
      color: $fg_color;
    }

    &-temperature {
      background: none;
      color: $alt_fg_color;
    }
  }

  &-sunrise-icon,
  &-sunset-icon,
  &-build-icon {
    color: $alt_fg_color;
    -st-icon-style: symbolic;
  }
}

// /**************************
//  * Dash to Dock Extension *
//  **************************/

$hard_coded_alpha: 0.2;
$alpha_override: 0.35;
$icon_padding: 8px;
$empty_shadow: 0 0 0 transparent;

#dashtodockContainer {
  background: transparent;

  #dash,
  &:overview #dash,
  &.extended #dash,
  &.extended:overview #dash {
    padding: 0;
    border-color: rgba(0,0,0,0.4);
    transition-duration: $longer_duration;
  }

  @each $_dock, $_radius in (top, 0 0 3px 3px),
                            (bottom, 3px 3px 0 0),
                            (left, 0 3px 3px 0),
                            (right, 3px 0 0 3px) {
    &.#{$_dock} #dash,
    &.#{$_dock}:overview #dash { border-radius: #{$_radius}; }

    &.#{$_dock}.extended #dash,
    &.#{$_dock}.extended:overview #dash { border-radius: 0; }
  }

  #dash { // default-mode
    background-color: $dash_bg;
  }

  &.opaque #dash { // solid-mode
    background-color: $dash_bg;
  }

  &.transparent #dash { // translucent-mode
    background-color: rgba($dash_bg, 0.75); // does not work
  }

  &:overview #dash { // overview-mode #1
    background-color: $dash_bg;
  }

  &.opaque:overview,
  &.transparent:overview { // overview-mode #2
    #dash {
      background-color: $dash_bg;
    }
  }

  &.extended:overview, // overview-mode #3
  &.opaque.extended:overview,
  &.transparent.extended:overview {
    #dash {
      background-color: $dash_bg;
    }
  }

  .app-well-app,
  .show-apps {
    .overview-icon {
      padding: $icon_padding;
      background-size: contain;
    }
  }

  .dash-item-container { // actual parent container
    background: transparent;

    > StWidget { background-size: contain; }

    .app-well-app-running-dot {
      width: 6px;
      height: 2px;
      box-shadow: none;
      margin: 2px;
      border-radius: 0;
      background-color: $selected_bg_color;
    }

    > StWidget.focused .app-well-app-running-dot {
      width: 18px;
      height: 2px;
      background-color: $selected_bg_color;
    }
  }

  .number-overlay,
  .notification-badge {
    min-width: 1.4em;
    min-height: 1.4em;
    margin: 0; // unset margin/padding
    padding: 0;
    border-radius: $circular_radius;
    font-weight: 700;
    text-align: center;
  }

  .number-overlay {
    background-color: $selected_bg_color;
    color: $selected_fg_color;
  }

  .notification-badge {
    background-color: $selected_bg_color;
    color: $selected_fg_color;
  }
}

@each $_dock in top, bottom, left, right {
  #dashtodockContainer.#{$_dock},
  #dashtodockContainer.extended.#{$_dock} {
    // fill whole focused backgrounds
    .dash-item-container > .app-well-app.focused {
      .overview-icon {
        background-color: rgba($selected_bg_color, 0.35);
        border: 1px solid rgba($selected_bg_color, 0.5);
      }

      &:hover .overview-icon {
        background-color: rgba($selected_bg_color, 0.5);
        border: 1px solid $selected_bg_color;
      }

      &:checked .overview-icon {
        background-color: rgba($selected_bg_color, 0.5);
        border: 1px solid $selected_bg_color;
      }
    }
  }
}

.popup-menu.app-well-menu {
  .popup-menu-item.dashtodock-app-well-preview-menu-item {
    padding-left: 1em;
    padding-right: 1em;
  }
}

// /***************************
//  * Dash To Panel Extension *
//  ***************************/

@each $_position, $_line in (Top, 0 2px),
                            (Bottom, 0 -2px) {
  #panel.dashtopanelMainPanel.dashtopanel#{$_position} {
    // FIXME: prevent weird double density
    background-gradient-start: $panel_bg;
    background-gradient-end: $panel_fg;

    #panelLeft,
    #panelCenter,
    .panel-corner,
    .panel-button {
      &:hover { box-shadow: inset #{$_line} rgba($selected_bg_color, 0.5); }
      &:active,
      &:focus,
      &:checked,
      &:overview { box-shadow: inset #{$_line} $selected_bg_color; }
    }

    .app-well-app,
    .show-apps {
      &:focus,
      &:hover,
      &:active,
      &:checked {
        .overview-icon { // unset styling
          border-radius: 0;
          background-color: rgba($selected_bg_color, 0.5);
          box-shadow: $empty_shadow;
        }
      }
    }

    #dashtopanelScrollview {
      padding: 0;

      .app-well-app { // stylesheet.css gets in our way
        &:focus .dtp-container,
        &:hover .dtp-container {
          background-color: rgba($selected_bg_color, 0.5);
          // box-shadow: inset 0 0 0 999px rgba($panel_fg, 0.1);
        }

        &:active .dtp-container {
          background-color: rgba($selected_bg_color, 0.35);
          // box-shadow: inset 0 0 0 999px rgba($panel_fg, 0.15);
        }

        // unfocused dot(s)
        .app-well-app-running-dot { background-color: $alt_selected_bg_color; }
        // focused dot(s)
        &.focused .app-well-app-running-dot { background-color: $alt_selected_bg_color; }
      }
    }

    StButton.show-apps {
      &:focus,
      &:hover {
        background-color: rgba($panel_fg, 0.1);
        box-shadow: $empty_shadow;
      }

      &:active {
        background-color: rgba($panel_fg, 0.15);
        box-shadow: inset #{$_line} $selected_bg_color;
      }

      &:checked {
        background-color: rgba($panel_fg, 0.15);
        box-shadow: inset #{$_line} $selected_bg_color;
        &:hover { background-color: rgba($panel_fg, 0.2); }
      }

      &, &:focus, &:hover, &:active, &:checked {
        .overview-icon { background-color: transparent; }
      }
    }
  }
}
