/*
 * A RECORDED DATE, shown quietly. At rest it is nothing but small muted text;
 * the hover underline is the one cue prose has to say it opens.
 *
 * The underline is a BOTTOM BORDER on the value box, not a text decoration: it
 * can then be transparent at rest and coloured on hover with no reflow, and it
 * sits under the text rather than through its descenders. It is painted only on
 * a stamp that PRESSES — a read-only one is text, and a rule under it would
 * promise a correction nobody can make.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-date-stamp {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0 solid var(--border);
    border-radius: 0;
    background-color: transparent;
    font-family: var(--font-sans);
    font-size: var(--lotics-text-xs);
    line-height: var(--lotics-leading-xs);
    letter-spacing: var(--lotics-tracking-xs);
    color: var(--lotics-ink-muted);
    appearance: none;
    text-align: start;
    cursor: default;
  }

  .lotics-date-stamp[data-pressable] {
    cursor: pointer;
  }

  .lotics-date-stamp:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  .lotics-date-stamp__value {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  .lotics-date-stamp[data-pressable] .lotics-date-stamp__value {
    border-bottom: 1px solid transparent;
    transition: border-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-date-stamp[data-pressable]:hover .lotics-date-stamp__value {
    border-bottom-color: var(--lotics-border-hover);
  }

  /*
   * An icon has no text baseline, so in a `baseline` row it hangs off its own
   * bottom edge. Centring it in the label's LINE BOX is not the fix either: a
   * line box carries descender space below the baseline that an icon has no
   * equivalent of, so the label's optical centre sits ~2px above the box centre.
   * The lift is that gap, not a taste adjustment.
   */
  .lotics-date-stamp__glyph {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    height: 16px;
    margin-bottom: var(--lotics-space-2);
    --lotics-icon-color: var(--lotics-ink-muted);
  }

  .lotics-date-stamp[data-pressable]:hover .lotics-date-stamp__glyph {
    --lotics-icon-color: var(--lotics-ink-default);
  }
}