{ theme }:

let

  accentColor = "#${theme.colors.accent}";
  textColor = "#${theme.colors.base05}";
  baseColor = "#${theme.colors.base00}";
  surfaceColor = "#${theme.colors.base02}";
  fontSize = "${toString theme.font.size}px";
  outerGap = "${toString theme.outerGap}px";
  innerGap = "${toString theme.innerGap}px";
  outerRadius = "${toString theme.outerRadius}px";
  innerRadius = "${toString theme.innerRadius}px";
  borderWidth = "${toString theme.borderWidth}px";

in

''
* {
   font-family: ${theme.font.monospace};
   font-size: ${fontSize};
}

/* Window */
window {
   margin: 0px;
   border: ${borderWidth} solid ${accentColor};
   border-radius: ${outerRadius};
   background-color: ${baseColor};
}

/* Outer Box */
#outer-box {
   padding: ${outerGap};
}

/* Scroll */
#scroll {
   margin: 0px;
   padding: ${innerGap};
   border: none;
}

/* Input */
#input {
  margin: ${innerGap};
  padding: ${innerGap};
  border: none;
  color: ${textColor};
  background-color: ${surfaceColor};
  border-radius: ${outerRadius};
}

#input:focus,
#input:active {
  border: ${borderWidth} solid ${accentColor};
  box-shadow: none;
  outline: none;
}

/* Text */
#text {
   margin: ${innerGap};
   padding: ${innerGap};
   border: none;
   color: ${textColor};
}

/* Selected Entry */
#entry:selected {
  background-color: ${accentColor};
  border-radius: ${outerRadius};
}

#entry:selected #text {
   color: ${baseColor};
}

''