@layer reset;@layer tokens{:root{--f-datetime--font-size:var(--f-text-sm);--f-datetime--gap:var(--f-space-1);--f-datetime--segment-gap:2px;--f-datetime--icon-color:var(--f-color-secondary)}}@layer base;@layer components{.f-datetime{gap:var(--f-datetime--gap);font-size:var(--f-datetime--font-size);flex-flow:wrap;align-items:center;max-width:100%;display:inline-flex;overflow:hidden}.f-datetime__date,.f-datetime__time,.f-datetime__relative{gap:var(--f-datetime--segment-gap);white-space:nowrap;flex-flow:row;align-items:center;display:flex;overflow:hidden}.f-datetime__date>svg,.f-datetime__time>svg,.f-datetime__relative>svg{color:var(--f-datetime--icon-color);flex-shrink:0;display:inline-flex}.f-datetime__date>span,.f-datetime__time>span,.f-datetime__relative>span{text-overflow:ellipsis;line-height:normal;overflow:hidden}.f-datetime__date>span:first-letter,.f-datetime__time>span:first-letter,.f-datetime__relative>span:first-letter{text-transform:uppercase}}@layer theme,utilities;