samples/apps/slideshow/src/css/slideshow.css
.slideshow {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1rem;
  overflow: hidden; /* Ensures buttons stay within bounds if absolutely positioned */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f8f7f5;
  border-bottom: 3px solid var(--main-color);
}

.slides {
  position: relative; /* Needed for absolute positioning of slides */
  width: 100%;
  height: 100%; /* Or a fixed height like 300px */
}

.slide {
  color: #333;
}

.slideshow button {
  position: absolute;
  bottom: 20px;
  z-index: 10; /* Ensure buttons are above slides */
  background-color: transparent; /* Sleek: remove background */
  color: #333; /* Icon color, adjust as needed */
  border: none;
  padding: 10px; /* Adjust padding for icon */
  margin: 0 10px;
  border-radius: 50%; /* Circular buttons for a modern look */
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 500;
  transition: opacity 0.3s ease-in-out, color 0.3s ease, transform 0.2s ease;
  opacity: 0.6; /* Slightly visible initially */
  transform: translateY(10px); /* Slight upward movement on hover */
  display: flex; /* For centering the SVG icon */
  align-items: center; /* For centering the SVG icon */
  justify-content: center; /* For centering the SVG icon */
}

.slideshow:hover button {
  opacity: 1; /* Visible on slideshow hover */
  transform: translateY(0);
}

.slideshow button:hover {
  color: #007bff; /* Change icon color on hover, adjust as needed */
  /* background-color: rgba(0, 0, 0, 0.1); Optional: subtle background on hover */
}

.slideshow button:active {
  transform: translateY(0) scale(0.9); /* Click effect, slightly more pronounced */
}

.slideshow button.prev {
  /* Class for previous button */
  left: 20px;
}

.slideshow button.next {
  /* Class for next button */
  right: 20px;
}
