/*
 * A RECORDED DATE, shown quietly: small muted text whose hover underline is its one cue. The
 * underline is a bottom border so it toggles without reflow and clears descenders; only a stamp
 * that presses paints it.
 */
@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 baseline, and centring on the label's line box ignores descender space, so it
   * lifts by that ~2px gap.
   */
  .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);
  }
}