@use "../../theme-color";
@use "drawing";

/* Dash to Dock */

#dashtodockContainer #dash {
  background-color: theme-color.$scrim;
}

#dashtodockContainer:overview #dash {
  background-color: theme-color.fill(theme-color.$on-dark);
}

#dashtodockContainer.extended:overview #dash {
  background-color: transparent;
}

#dashtodockContainer.left #dash,
#dashtodockContainer.right #dash {
  padding: 3px 0;
}

#dashtodockContainer.top #dash,
#dashtodockContainer.bottom #dash {
  padding: 0 3px;
}

#dashtodockContainer.extended #dash {
  padding: 0;
  border-radius: 0;
}

#dashtodockContainer.left .dash-item-container > StWidget,
#dashtodockContainer.right .dash-item-container > StWidget,
#dashtodockContainer.extended.left .dash-item-container > StWidget,
#dashtodockContainer.extended.right .dash-item-container > StWidget {
  padding: 3px 6px;
}

#dashtodockContainer.extended.left .dash-item-container:first-child > StWidget,
#dashtodockContainer.extended.right .dash-item-container:first-child > StWidget {
  padding: 6px 6px 3px 6px;
}

#dashtodockContainer.extended.left .dash-item-container:last-child > StWidget,
#dashtodockContainer.extended.right .dash-item-container:last-child > StWidget {
  padding: 3px 6px 6px 6px;
}

#dashtodockContainer.top .dash-item-container > StWidget,
#dashtodockContainer.bottom .dash-item-container > StWidget,
#dashtodockContainer.extended.top .dash-item-container > StWidget,
#dashtodockContainer.extended.bottom .dash-item-container > StWidget {
  padding: 6px 3px;
}

#dashtodockContainer.extended.top .dash-item-container:first-child > StWidget,
#dashtodockContainer.extended.bottom .dash-item-container:first-child > StWidget {
  padding: 6px 3px 6px 6px;
}

#dashtodockContainer.extended.top .dash-item-container:last-child > StWidget,
#dashtodockContainer.extended.bottom .dash-item-container:last-child > StWidget {
  padding: 6px 6px 6px 3px;
}

// Running and focused application style

#dashtodockContainer .focused .overview-icon {
  background-color: theme-color.activated-overlay(theme-color.$on-dark);
}

// Remove background-color if the indicator style is default
#dashtodockContainer .default.focused .overview-icon {
  background-color: transparent;
}

#dashtodockContainer .app-well-app-running-dot {
  background-color: transparent;
}

#dashtodockContainer .default {
  background-size: cover;
}

// Default running and focused application style
@each $side in "left", "right", "top", "bottom" {
  @for $i from 1 through 4 {
    @each $class, $suffix in ("": "", ".focused": "-focused") {
      #dashtodockContainer.#{$side} .default.running#{$i}#{$class} {
        background-image: url("assets/dash/#{$side}-running#{$i}#{$suffix}.svg");
      }
    }
  }
}


/* Simple Dock */

#dash:desktop {
  background-color: theme-color.$scrim;
}

/* GPaste */

.popup-menu {
  .search-entry {
    color: theme-color.$on-surface;
    selection-background-color: theme-color.$selected-overlay;
    selected-color: theme-color.$on-surface;
    @include drawing.entry(normal);

    &:hover {
      @include drawing.entry(hover);
    }

    &:focus {
      @include drawing.entry(focus);
      color: theme-color.$on-surface;
    }

    .search-entry-icon {
      color: theme-color.hint(theme-color.$on-surface);
    }

    &:hover,
    &:focus {
      .search-entry-icon {
        color: theme-color.$on-surface;
      }
    }
  }
}
