button {
    border: none;
    border-radius: 4px;
    background-color: var(--primary-color);
    color: var(--text-color-light);
    cursor: pointer;
    transition: background-color 0.3s;
    align-items: center;
    justify-content: center;
}

button:hover {
    background-color: var(--secondary-color);
}

button.collapsed::before {
  font-family: monospace;
  content: '[+] ';
}

button.expanded::before {
  font-family: monospace;
  content: '[-] ';
}

.light {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-color);
  background: var(--secondary-bg);
}

.light:hover {
  background-color: var(--hover-color);
}

.arrow {
  display: inline-block; 
  cursor: pointer;
  user-select: none;
  transform: rotate(90deg) translate(25%, 0);
}

.arrow::before {
  content: "▶";
}

.arrow.collapsed {
  transform: rotate(0deg);
}


.eye-toggle {
  --eye-size: 1.8rem;       /* size of the eye */
  --eye-color: var(--text-color-dark); /* color of the eye */
  --slash-color: red;        /* color of the slash */

  appearance: none;
  cursor: pointer;
  position: relative;
  width: var(--eye-size);
  height: var(--eye-size);
  display: inline-block;
}

/* Eye */
.eye-toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--eye-size) * 0.8);
  height: calc(var(--eye-size) * 0.8);
  transform: translate(-50%, -50%);
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGcAAAA8CAYAAAB7CKTNAAAABHNCSVQICAgIfAhkiAAABSNJREFUeJzlnFuIVlUUx38zNnj5hLykJpZldnkQYiqhB6cMeomK6EIRSWH00ksvgTA95IP0IgWCCEKQD0Iw9NAFK8mEoJdCiOymDUmalWKaxeio09gcH47H9Ptmn7PXWnvvc77pD+vl4zvr/197nb3Pvpx1euguDAAPAquAFcB8j2tGgL3Al8CnwO5o6v5HeAr4Csgi2jDwYqqAuhnLgc+Jm4wq2wesjh1ot2AOsJ96E+KyY8Dd8UJvLrZRf+NL7JM4zdAsNLWX+NpxoCd4qziQiugwcH0irhQYB+YCozFJYifnAPmDfqriDNCK5bw3kt8PyYeBqZwYgFnkce6vW4gPFgITxBnvR4BngCVKbYvJ105/RtKXAWuU2qLjMGED/Q59InyxEHg3sO4zkTWL0CJcb3kLmJ5W/iX0Ai97aPS1x9LK78Rn2IMYB2anFl6B6cAR7LEdSS28wHlPgS6zPkQHgX88eMaARw08r3pwlNm/Bm4VLMPYsJHbJyEu+93A+5KBNyPilLvALQZx40buYnoewtYbdOwy8K4z8JZinUGUFaGSElLXmJLzfSNvB3Yqheww8k5T8qZK0B1Kzm+MvJegTYx196FHyVtHzx5VcO61kn6sIN1nJb2IMo4DwI0X/7eIMLvdVrym4PxaS6ZJzCotWRu2O/yPVFx3QqG5sLUBdBd7bRLbKSXZpCDp08d0Ba5y+P/b8/qjCu2hek8BKe9GX8dPCB1bp8jtcI3fEmiTI76LSzAi5L6/yuFioUPfu9kXrkmAdHbzgcNPyt4D8JOQ+2qXo16ho6OBAwF4zsH1kNDPXQ4/Pna7NYg2SCcrk0Li4IfAAVRpCOkrde+BvL18uTuOvr8XXPxrBPEFXJzSnrOyxFcdyYG83Xz5txUXPSu4KPQz5nKUDavSnrq7xFddyQHZYnUJyDIa89xlQQW3BJbEZOTbRrHgq2GN9IKYd9UNFbynPf38UeHHx2aFCGgSnPPkPw3/7X8tExDESlDVoVQLOFvxn7/Ie2ATsQP/I/g57T+8if+ddTKA2MkE+fIfIn9WLgeeBL4VXFvH6PC0gHvQ5eSkwMmeCEGEbOCmJGeZgPdUlTNJEB+FjaP2pIROTis070yhw13BQqk/KRn5mi8E+oS83jsT/ULH6nOJNtwp5I1h1waIQ5qYISnBoJDgoCWay1B3cqxwHXm4TD25ekdI5LsWKcN7Qs6Q9rxRu/SRYL4ZJPtuhVlLS7qx19ym4AtS5TGsIJ5p4LtXwWc1yUK8HRsVfEG3wjTvDm818B1S8Gltu0GnZrtoroHPiYMKIZbSvBSJsTwnNXxRy1o0Q1yGvia0iYnZoORbpOQT4W2lOG1h0R4lX5ltUWrRVlfMUPKp8IhSZIbuhe75Br520xRoWb4uEqv2thSzlWIL0zwYH0ZXgjKBbkY2YIhvQsEXHNayQ+1YPER5vc4YsFnp+z5hDO0W9RsFUvyGfbhpQjXyFuxxiPfKUiDU4nGUSGsBB24OpDujefWtHfA9K/exU8BNgfXNAF4IqDEjPyLvGlhrKMvsDfK9rHkVGlrAUuBx5K/GSmxA3jzNwDHiNUrd9nPAdupAqq9GtQhznNAUnCdcyYsTqRZHo+Q3wgOJ+GKinwSJqROSV4CbYv1RWqLBWIqu2DWV/cIU7yW+GKL+ZBQW7WMO3Y4+5O8uWG0MeCVFcFMNq9F/C8Flx4HXsR2lR0eyL70GxnXAPeTvud0KXMOVJ4wnyAtmfySvJ/2C/H3qrsIFlB5hshp2X8sAAAAASUVORK5CYII=") no-repeat center / contain;
  display: block;
}

/* Slash overlay */
.eye-toggle::after {
  content: "/";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  font-size: calc(var(--eye-size) * 1.2);
  color: var(--slash-color);
  line-height: 1;
  pointer-events: none;
}

/* Hide slash when checked */
.eye-toggle:checked::after {
  content: "";
}


/* Divider */
.divider {
    position: relative;
    margin-bottom: 6px;
    border-top: 1px solid var(--border-color);
}

/* Extra hit area */
.divider::after {
  content: '';
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
}