.Toggle {
  display: flex;
  user-select: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.Toggle__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: var(--canvasWidth);
  margin: auto;
}

.Toggle__state {
  padding: 0.4em 0.8em;
  background: var(--white);
  transition: background-color 250ms ease-in-out;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .5em;
  color: var(--black);

  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 80% 80%;
  cursor: pointer;
}

.Toggle__state.is-list {
  background-image: url('/images/list_black.svg');
  background-color: var(--white);
}

.Toggle__state.is-mosaic {
  background-image: url('/images/mosaic_black.svg');
}

.Toggle__state.is-mosaic:hover,
.Toggle__state.is-mosaic.is-active {
  background-image: url('/images/mosaic_white.svg');
  background-color: var(--black);
}

.Toggle__state.is-list:hover,
.Toggle__state.is-list.is-active {
  background-image: url('/images/list_white.svg');
  background-color: var(--black);
}

.Toggle__state:first-child {
  border-radius: 2px 0 0 2px;
}

.Toggle__state:last-child {
  border-radius: 0 2px 2px 0;
}