

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

#dashtodockContainer {
  background: transparent;

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

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

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