.header {
  background-color: hsl(var(--header-hue), 68.5%, 75%);
  border-bottom: 1px solid hsl(var(--header-hue), 75%, 50%);
  height: 55px;
}

.tools {
  padding: .75rem;
  background-color: var(--input-color);
  border-top: 1px solid hsl(0,0%,55%);
  grid-row: 2 / 4;
}

/* Box with border */
.tool {
  display: inline-block;
  clear:both;
  float:left;
  text-decoration: none;
  color: inherit;
  padding: .5rem;
  margin-top: .5rem;
  border: 1px solid;
  border-right: none;
  position: relative;
  height: 24px;
}

/* Point on right of box */
.tool::after {
  position: absolute;
  top: 1px;
  left: 100%;
  content: '';
  width: 0;
  height: 0;
  border-top: 19px solid transparent;
  border-left: 18px solid;
  border-bottom: 19px solid transparent;
}

/* Outline of point on right of box */
.tool::before {
  position: absolute;
  top: -1px;
  left: 100%;
  content: '';
  width: 0;
  height: 0;
  border-top: 21px solid transparent;
  border-left: 20px solid;
  border-bottom: 21px solid transparent;
}

/* Colors for writer tool */
.tool.writer {
  background-color: hsl(var(--writer-hue), var(--tool-list-saturation), var(--tool-list-value));
  border-color: hsl(var(--writer-hue), var(--dark-accent-saturation), var(--dark-accent-value));
}
.tool.writer::after {
  border-left-color: hsl(var(--writer-hue), var(--tool-list-saturation), var(--tool-list-value));
}
.tool.writer::before {
  border-left-color: hsl(var(--writer-hue), var(--dark-accent-saturation), var(--dark-accent-value));
}

.tool.writer:hover {
  background-color: hsl(var(--writer-hue), var(--tool-list-hover-saturation), var(--tool-list-value));
}
.tool.writer:hover::after {
  border-left-color: hsl(var(--writer-hue), var(--tool-list-hover-saturation), var(--tool-list-value));
}

.tool.writer:active {
  background-color: hsl(var(--writer-hue), 60%, var(--tool-list-value));
}
.tool.writer:active::after {
  border-left-color: hsl(var(--writer-hue), 60%, var(--tool-list-value));
}

/* Colors for reader tool */
.tool.reader {
  background-color: hsl(var(--reader-hue), var(--tool-list-saturation), var(--tool-list-value));
  border-color: hsl(var(--reader-hue), var(--dark-accent-saturation), var(--dark-accent-value));
}
.tool.reader::after {
  border-left-color: hsl(var(--reader-hue), var(--tool-list-saturation), var(--tool-list-value));
}
.tool.reader::before {
  border-left-color: hsl(var(--reader-hue), var(--dark-accent-saturation), var(--dark-accent-value));
}

.tool.reader:hover {
  background-color: hsl(var(--reader-hue), var(--tool-list-hover-saturation), var(--tool-list-value));
}
.tool.reader:hover::after {
  border-left-color: hsl(var(--reader-hue), var(--tool-list-hover-saturation), var(--tool-list-value));
}

.tool.reader:active {
  background-color: hsl(var(--reader-hue), 60%, var(--tool-list-value));
}
.tool.reader:active::after {
  border-left-color: hsl(var(--reader-hue), 60%, var(--tool-list-value));
}

@media only screen and (min-width: 850px) {
  /* Switch border to left when in desktop layout */
  .tools {
    border-top: unset;
    border-left: 1px solid hsl(0,0%,55%);
  }