.habit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-unit);
  margin-bottom: calc(var(--spacing-unit) * 4);
}

.habit__name {
  font-size: calc(var(--spacing-unit) * 3);
  font-weight: var(--font-weight-medium);
  color: #1c2024;
  letter-spacing: var(--tracking-tight);
  margin: 0;
  margin-bottom: var(--spacing-unit);
}

.habit__nameLink {
  text-decoration: none;
  color: #1c2024;
}

.habit__nameLink:hover {
  text-decoration: underline;
}

.habit__entries {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-unit);
}

.habit__entryButton {
  width: calc(var(--spacing-unit) * 5);
  height: calc(var(--spacing-unit) * 5);
  border-radius: calc(var(--spacing-unit) * 0.5);
  background-color: #f0f0f3;
  border: 0;
  cursor: pointer;
  margin-bottom: var(--spacing-unit);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-bg);
}

@media (min-width: 768px) {
  .habit__entryButton {
    width: calc(var(--spacing-unit) * 8);
    height: calc(var(--spacing-unit) * 8);
    border-radius: var(--spacing-unit);
  }
}

.habit__entryButton svg {
  width: calc(var(--spacing-unit) * 3);
  height: calc(var(--spacing-unit) * 3);
}

@media (min-width: 768px) {
  .habit__entryButton svg {
    width: calc(var(--spacing-unit) * 4);
    height: calc(var(--spacing-unit) * 4);
  }
}

.habit__entryButton:hover {
  background-color: var(--color-slate-bg-hover);
}

.habit__entryButton--green {
  background-color: var(--color-green-bg);
  color: var(--color-green-text);

  &:hover {
    background-color: var(--color-green-bg-hover);
  }
}

.habit__entryButton--red {
  background-color: var(--color-red-bg);
  color: var(--color-red-text);

  &:hover {
    background-color: var(--color-red-bg-hover);
  }
}

.habit__entryButton--yellow {
  background-color: var(--color-yellow-bg);
  color: var(--color-yellow-text);

  &:hover {
    background-color: var(--color-yellow-bg-hover);
  }
}

.habit__entryButton--slate {
  background-color: var(--color-slate-bg);
  color: var(--color-slate-text);

  &:hover {
    background-color: var(--color-slate-bg-hover);
  }
}

.habit__entryDay {
  font-weight: var(--font-weight-normal);
  color: var(--color-slate-text-light);
  text-align: center;
}

.habit__entryDay--green {
  color: var(--color-green-text-light);
}

.habit__entryDay--red {
  color: var(--color-red-text-light);
}

.habit__entryDay--yellow {
  color: var(--color-yellow-text-light);
}

.habit__entryDay--slate {
  color: var(--color-slate-text-light);
}