.time-track {
  font-size: var(--font-size-xxx-small);
  line-height: 1;
  z-index: 3;
  min-width: 2.4ch;
  padding-block: 2px;

  .week-grid__day & {
    width: 2.4ch;
    justify-self: end;
  }

  &[open] {
    z-index: 9;
  }

  .popup-menu {
    line-height: 1.4;
  }

  /* Ensure the pop-up menus on the first 2 days of the week don't fall off-screen (left) */
  &.grid-col-1,
  &.grid-col-2 {
    .popup-menu {
      left: -1em;
      margin-left: 0;
    }
  }

  /* Ensure the pop-up menus on the last 2 days of the week don't fall off-screen (right) */
  &.grid-col-6,
  &.grid-col-7 {
    .popup-menu {
      left: auto;
      margin-left: 0;
      right: -1em;
    }
  }
}

.time-track--ongoing,
.time-track--completed {
  background-color: var(--color-peach);
  color: var(--color-txt);
  border-radius: 1em;
}

.time-track--ongoing {
  border-radius: 1em 0 0 1em;

  .week-grid__day & {
    border-radius: 1em 1em 0 0;
  }
}

.time-track--starts-before-today {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.time-track--ends-after-today {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.time-track__label {
  padding: 0 0.4ch;

  .week-grid__day & {
    height: 100%;
  }
}

.time-track__icon {
  width: auto;
  height: 1em;
}

.time-track__form {
  .autocomplete-field__selected-value {
    background-color: transparent;
    margin: 0.1em 0;
    justify-content: space-between;
    border-color: var(--color-bg--main-transparent);

    &:focus {
      border-color: transparent;
    }
  }

  .autocomplete-list [role=option]::after {
    display: none;
  }
}

.time-track__table {
  display: table;
  font-size: var(--font-size-small);
  inline-size: 100%;
  margin: 0 auto;
  max-inline-size: 100%;
}

.time-track__thead {
  display: table-row;
  inset-block-start: 4.8rem;
  z-index: 1;

  & > * {
    border-block-end: 1px solid var(--color-border);
    display: table-cell;
    font-weight: bold;
    padding: var(--quarter-space);
  }
}

.time-track__tr {
  display: table-row;

  &:nth-of-type(even) > * {
    background-color: var(--color-bg--surface-glint);
  }
}

.time-track__td {
  border-block-end: 1px solid var(--color-border);
  display: table-cell;
  padding: var(--quarter-space);
  vertical-align: middle;
}

.time-track__category-pill {
  align-items: center;
  block-size: 2em;
  border: 1px solid var(--color-unread);
  border-radius: 2em;
  color: var(--color-unread);
  display: inline-flex;
  font-weight: 500;
  max-inline-size: clamp(10ch, 20vw, 25ch);
  padding: 0 0.8em;
}

.time-track__description {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  cursor: pointer;
  display: -webkit-box;
  max-inline-size: clamp(12ch, 20vw, 35ch);
  min-inline-size: 12ch;
  overflow: hidden;
  word-break: break-word;

  p {
    &:first-of-type {
      margin-block-start: 0;
    }

    &:last-of-type {
      margin-block-end: 0;
    }
  }

  &.time-track__description--expanded {
    display: block;
    cursor: initial;
  }
}

.time-track__time-input {
  max-width: unset;
  height: unset;
  color: var(--color-txt);
  padding: 0;

  &:invalid input {
    outline: 2px solid var(--color-negative);
    background-color: var(--color-bg--negative);
  }

  .input {
    border: 0;
    padding: 0.5em;
    min-width: 12.9ch;
    max-width: 7ch;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    outline: 0;
  }
}

.time-track__button {
  background: var(--color-peach);
  color: var(--color-negative);
  border: 0;
  margin-left: -0.9em;
  margin-top: 1.4em;
  pointer-events: all;
  font-size: var(--font-size-xx-small) !important;
  transition: opacity 0.2s ease;

  &::before {
    background-image: url("/assets/icons/time-clock-afb81a54.svg");
    background-size: 1.2em;
    background-position: center;
  }

  &:not(.time-track__button--active) {
    &:hover {
      &::before {
        filter: var(--colorize-red);
        background-image: url("/assets/icons/controls-record-9f7e336a.svg");
      }
    }

    .week-grid__now & {
      position: absolute;
      top: -2.5em;
      right: 0.3em;
      transition: opacity 0.2s ease;
      opacity: 0;

      &:hover {
        opacity: 1;
      }

      &::before {
        filter: var(--colorize-red);
        background-image: url("/assets/icons/controls-record-9f7e336a.svg");
      }
    }
  }

  .sheet-actions & {
    font-size: inherit !important;
    margin: 0.1em 0 0;
    border: 1px solid var(--color-negative);
  }
}

.time-track__button--active {
  animation: pop-visible 0.2s both;
  opacity: 1;
  overflow: visible;
  text-indent: 2.3em;
  line-height: 2em;

  .week-grid__now & {
    overflow: hidden;
    position: absolute;
    top: -2.5em;
    right: 0.3em;
  }

  &::before {
    filter: var(--colorize-red);
    background-image: url("/assets/icons/stop-27815df4.svg");
    background-size: 0.9em;
  }
}