/* Symbols */

.symbol,
.symbol:before {
  width: calc(4ch + 4px);
  height: calc(4ch + 4px) !important;
  background-size: calc(4ch + 4px) calc(4ch + 4px);
}

/* Eye */

#eye:checked:before {
  background-image: url('../../assets/icons/eye/open.svg');
}
#eye:not(:checked):before {
  background-image: url('../../assets/icons/eye/closed.svg');
}
#eye,
#eye:before {
  visibility: visible !important;
}
/* Show/hide options */
#options:has(#eye:not(:checked)) > * {
  visibility: hidden;
}
#options:has(#eye:checked) > * {
  visibility: visible;
}

/* Checkmark */

.checkmark {
  grid-column: 1 / span 1;
}

.checkmark:checked:before {
  background-image: url('../../assets/icons/check.svg');
}

/* Fullscreen */

#fullscreen:checked:before {
  background-image: url('../../assets/icons/fullscreen/leave.svg');
}

#fullscreen:not(:checked):before {
  background-image: url('../../assets/icons/fullscreen/enter.svg');
}

/* Edit */
#edit {
  visibility: visible;
  grid-column: 3 / span 1;
  background-color: transparent !important;
}
#edit:not(:checked):before {
  background-image: url('../../assets/icons/edit.svg');
}
#edit:checked:before {
  background-image: url('../../assets/icons/check.svg');
}

#timeline:has(#edit:not(:checked)) > .toggle,
#timeline:has(#edit:not(:checked)) > input[name='edit'] {
  width: 0;
  visibility: hidden;
}