/* Habits
 * -------------------------------------------------------------------------- */

.habit__input {
  &:checked + .habit__button {
    background-color: var(--color-secondary);

    &::before { filter: var(--colorize-inverted-ink); }
  }
}

.habit__button {
  background-color: var(--color-bg--main);
  border-color: var(--color-border--medium);
  width: 1.8em;
  min-width: 1.8em;
  height: 1.8em;
  transition: transform 150ms ease;

  &::before { filter: var(--colorize-ink); }
  &:hover, &:focus, &:active { transform: scale(1.2); }
}

.btn--habit--art::before { background-image: url("/assets/icons/habits/art-fbc2f8e1.svg"); }
.btn--habit--baseball::before { background-image: url("/assets/icons/habits/baseball-e562abf0.svg"); }
.btn--habit--basketball::before { background-image: url("/assets/icons/habits/basketball-a2e4be4b.svg"); }
.btn--habit--bed::before { background-image: url("/assets/icons/habits/bed-64bf4410.svg"); }
.btn--habit--bicycle::before { background-image: url("/assets/icons/habits/bicycle-527a1664.svg"); }
.btn--habit--brain::before { background-image: url("/assets/icons/habits/brain-f01c0686.svg"); }
.btn--habit--breathe::before { background-image: url("/assets/icons/habits/breathe-83086063.svg"); }
.btn--habit--camera::before { background-image: url("/assets/icons/habits/camera-e9147b58.svg"); }
.btn--habit--cat::before { background-image: url("/assets/icons/habits/cat-b4e03ffa.svg"); }
.btn--habit--church::before { background-image: url("/assets/icons/habits/church-5c7b82e7.svg"); }
.btn--habit--clean::before { background-image: url("/assets/icons/habits/clean-02115164.svg"); }
.btn--habit--cook::before { background-image: url("/assets/icons/habits/cook-03bb559d.svg"); }
.btn--habit--dog::before { background-image: url("/assets/icons/habits/dog-1af49182.svg"); }
.btn--habit--drink::before { background-image: url("/assets/icons/habits/drink-4626e277.svg"); }
.btn--habit--football::before { background-image: url("/assets/icons/habits/football-c9f64413.svg"); }
.btn--habit--fruit::before { background-image: url("/assets/icons/habits/fruit-7ff37204.svg"); }
.btn--habit--game::before { background-image: url("/assets/icons/habits/game-a9c9acd6.svg"); }
.btn--habit--garden::before { background-image: url("/assets/icons/habits/garden-c2961cf5.svg"); }
.btn--habit--guitar::before { background-image: url("/assets/icons/habits/guitar-49656cdf.svg"); }
.btn--habit--heart::before { background-image: url("/assets/icons/habits/heart-11237326.svg"); }
.btn--habit--heat::before { background-image: url("/assets/icons/habits/heat-8fbb0292.svg"); }
.btn--habit--hydrate::before { background-image: url("/assets/icons/habits/hydrate-c40db391.svg"); }
.btn--habit--ice::before { background-image: url("/assets/icons/habits/ice-4ddc3f3d.svg"); }
.btn--habit--lotus::before { background-image: url("/assets/icons/habits/lotus-2f112546.svg"); }
.btn--habit--meditate::before { background-image: url("/assets/icons/habits/meditate-22087a42.svg"); }
.btn--habit--money::before { background-image: url("/assets/icons/habits/money-92ee9b4e.svg"); }
.btn--habit--music::before { background-image: url("/assets/icons/habits/music-8e35945d.svg"); }
.btn--habit--piano::before { background-image: url("/assets/icons/habits/piano-63465ff2.svg"); }
.btn--habit--pill::before { background-image: url("/assets/icons/habits/pill-932c38cc.svg"); }
.btn--habit--plant::before { background-image: url("/assets/icons/habits/plant-b791050d.svg"); }
.btn--habit--read::before { background-image: url("/assets/icons/habits/read-a6a441e5.svg"); }
.btn--habit--run::before { background-image: url("/assets/icons/habits/run-368458cf.svg"); }
.btn--habit--smoke::before { background-image: url("/assets/icons/habits/smoke-4763260c.svg"); }
.btn--habit--soccer::before { background-image: url("/assets/icons/habits/soccer-916e6d0d.svg"); }
.btn--habit--star::before { background-image: url("/assets/icons/habits/star-b27047de.svg"); }
.btn--habit--study::before { background-image: url("/assets/icons/habits/study-5a799a54.svg"); }
.btn--habit--swim::before { background-image: url("/assets/icons/habits/swim-43027be9.svg"); }
.btn--habit--tea::before { background-image: url("/assets/icons/habits/tea-eab56b23.svg"); }
.btn--habit--toothbrush::before { background-image: url("/assets/icons/habits/toothbrush-d52266f7.svg"); }
.btn--habit--tree::before { background-image: url("/assets/icons/habits/tree-3f89f5e1.svg"); }
.btn--habit--tv::before { background-image: url("/assets/icons/habits/tv-27f517c1.svg"); }
.btn--habit--vegetable::before { background-image: url("/assets/icons/habits/vegetable-a5bd8fb5.svg"); }
.btn--habit--walk::before { background-image: url("/assets/icons/habits/walk-35d97c34.svg"); }
.btn--habit--water::before { background-image: url("/assets/icons/habits/water-0bd3c51c.svg"); }
.btn--habit--weights::before { background-image: url("/assets/icons/habits/weights-413ce90b.svg"); }
.btn--habit--write::before { background-image: url("/assets/icons/habits/write-402c9852.svg"); }
.btn--habit--yoga::before { background-image: url("/assets/icons/habits/yoga-ce643269.svg"); }

.habits__calendar {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border-spacing: 0;
  font-size: var(--font-size-small);
  border-collapse: collapse;

  th, td {
    border: 1px solid var(--color-border);
    padding: var(--half-space);
    text-align: center;
  }

  th { text-transform: uppercase; }

  .habits__day--today {  border: 2px solid var(--color-secondary); }
}

.habits__day-indicator {
  border: 1px solid transparent;
  width: 2em;
  height: 2em;
  line-height: 2em;
  display: inline-block;
  border-radius: 1em;
  text-align: center;
  margin: auto;

  .habits__day--other-month & { opacity: 0.5; }
  .habits__day--scheduled_on:not(.habits__day--future) & { border-color: var(--color-border); }

  .habits__day--completed & {
    background-color: var(--color-secondary);
    color: var(--color-txt--reversed);
  }
}

.habit__notice {
  background-color: color-mix(in srgb, var(--color-secondary) 10%, white);

  [data-color-scheme="dark"] & { background-color: color-mix(in srgb, var(--color-secondary) 20%, black); }
}

.habits-menu {
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: repeat( auto-fit, minmax(15rem, 0.33fr) );
  gap: 0.5em;
  grid-auto-flow: row;
  place-content: center;
}

.habits-menu__item {
  padding: 1em;
  border-radius: 0.4em;
  border-color: var(--color-border);
  transition: box-shadow 150ms ease, background-color 150ms ease, border-color 150ms ease;

  &:hover,
  &:active,
  &:focus,
  &:focus-visible {
    background-color: var(--color-bg--surface-glint);
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px var(--color-secondary);
  }

  .habits-menu--stopped & {
    --color-secondary: var(--color-border--heavy) !important;
    color: var(--color-border--heavy);
  }
}

.habits-menu__icon {
  background-color: var(--color-secondary);
  margin: auto auto var(--quarter-space);
  width: 4em;
  height: auto;
  aspect-ratio: 1;
  border-radius: 4em;

  &::before {
    filter: var(--colorize-inverted-ink);
    background-position: center;
    inset: 1em;
    width: auto;
    height: auto;
    background-size: 2em;
    margin: 0;
  }
}

.habits-menu__streak { color: var(--color-secondary); }

.habits-calendar {
  .hdg--divider {
    &::before {
      background: var(--color-secondary);
    }

    span {
      word-break: keep-all;
      overflow-wrap: break-word;
      hyphens: auto;
      line-height: 1.2;
    }
  }
}