.source-tile-cell{position:relative}.source-tile{position:relative;border-radius:2.25rem;overflow:hidden;aspect-ratio:310 / 248;cursor:pointer;background:transparent;transition:transform var(--anim-hover) ease,box-shadow var(--anim-hover) ease}.source-tile-cell:hover .source-tile,.source-tile:hover,.source-tile-cell.tile-menu-open .source-tile,.source-tile.tile-menu-open{transform:scale(1.02)}.source-tile:active{transform:scale(.99)}.tile-cover{position:absolute;inset:0;object-fit:cover;width:100%;height:100%}.tile-mask-bg{position:absolute;inset:0;overflow:hidden}.source-tile.has-cover .tile-mask-bg:after{content:"";position:absolute;inset:0;background:var(--folder-bg-overlay);pointer-events:none}.tile-cover-blur{filter:blur(40px)}.source-tile.has-cover .tile-cover-blur{inset:calc(-1 * var(--spacing-200));width:calc(100% + var(--size-400));height:calc(100% + var(--size-400));filter:var(--effect-floating-background-blur)}.tile-photo-body{position:absolute;bottom:0;left:0;width:100%;height:85.3%;overflow:hidden;border-radius:inherit;border:1px solid var(--surface-stroke-1);box-sizing:border-box}.source-tile.has-cover .tile-photo-body:after,.subfolder-tile.has-cover .tile-photo-body:after{content:"";position:absolute;inset:0;background:var(--folder-fg-overlay);pointer-events:none;z-index:1}.tile-cover-placeholder{position:absolute;inset:0;background:var(--card-empty-background);display:flex;align-items:center;justify-content:center}.source-tile.has-cover .tile-cover-placeholder{background:transparent}.source-tile.has-cover .folder-mask-svg{z-index:1}.source-tile.has-cover .folder-cover-outline{stroke:var(--surface-stroke-1)}[data-theme=light] .source-tile.has-cover .tile-photo-body{border:none;box-shadow:none}[data-theme=light] .source-tile.has-cover .tile-photo-body:before{content:"";position:absolute;inset:0;border:calc(var(--size-20) / 2) solid var(--surface-stroke-1);border-radius:inherit;box-sizing:border-box;pointer-events:none;z-index:4}.tile-overlay{position:absolute;bottom:0;left:0;right:0;height:50%;background:var(--card-overlay-background-2);filter:var(--effect-floating-background-blur);opacity:.7;pointer-events:none}.tile-badge{position:absolute;top:calc(14.7% + 19px);inset-inline-end:19px;width:var(--size-320);height:32px;interpolate-size:allow-keywords;background:var(--badge-background);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--radius-2xlarge);padding:4px;font-family:Segoe UI,sans-serif;font-size:14px;font-weight:600;color:var(--fg-neutral-static-inverted);display:flex;align-items:center;justify-content:flex-start;gap:0;z-index:2;overflow:hidden;transition:width var(--anim-medium) ease-out,gap var(--anim-short) ease-out,padding-inline-start var(--anim-short) ease-out,padding-inline-end var(--anim-short) ease-out}.tile-badge-label{display:block;white-space:nowrap;padding-bottom:2px;opacity:0;transform:translate(calc(-1 * var(--spacing-40)));transition:opacity var(--anim-short) ease-out,transform var(--anim-medium) ease-out}.source-tile-cell:hover .source-tile .tile-badge-label,.source-tile:hover .tile-badge-label,.source-tile-cell.tile-menu-open .source-tile .tile-badge-label,.source-tile.tile-menu-open .tile-badge-label{opacity:1;transform:none}.source-tile-cell:hover .source-tile .tile-badge,.source-tile:hover .tile-badge,.source-tile-cell.tile-menu-open .source-tile .tile-badge,.source-tile.tile-menu-open .tile-badge{width:max-content;height:32px;gap:6px;padding-inline-start:6px;padding-inline-end:8px;border-radius:var(--radius-2xlarge)}.tile-badge-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.tile-badge-icon svg,.tile-badge-icon img{width:20px;height:20px}.tile-badge-icon-24 svg,.tile-badge-icon-24 img{width:var(--size-240);height:var(--size-240)}.tile-info{position:absolute;bottom:0;left:0;right:0;padding:var(--spacing-200);z-index:2}.tile-name{font-size:var(--font-size-subtitle-1-strong);font-weight:var(--font-weight-subtitle-1-strong);line-height:var(--line-height-subtitle-1-strong);color:var(--fg-neutral-static-inverted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;filter:var(--tile-text-shadow);margin-bottom:var(--spacing-40)}.tile-counts{font-size:var(--font-size-caption-1-strong);line-height:var(--line-height-caption-1-strong);font-weight:var(--font-weight-caption-1-strong);color:var(--fg-neutral-static-inverted);filter:var(--tile-counts-shadow);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tile-menu-btn{position:absolute;bottom:12px;inset-inline-end:var(--spacing-160);width:32px;height:32px;box-sizing:border-box;z-index:2;padding:var(--spacing-40);border-radius:var(--radius-circular);background:var(--badge-background);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:none;color:var(--fg-neutral-static-inverted);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--anim-short) ease;z-index:3}.source-tile-cell:hover .tile-menu-btn,.source-tile-cell:focus-within .tile-menu-btn,.source-tile-cell.tile-menu-open .tile-menu-btn,.source-tile.tile-menu-open .tile-menu-btn,.tile-menu-btn:focus{opacity:1}.tile-menu-btn:active{background:var(--badge-background);color:var(--fg-neutral-static-inverted)}.source-tile-cell:has(.tile-menu-btn):hover .tile-info,.source-tile-cell:has(.tile-menu-btn):focus-within .tile-info,.source-tile-cell:has(.tile-menu-btn).tile-menu-open .tile-info{padding-inline-end:calc(32px + 4px + var(--spacing-160))}.tile-menu-btn .fluent-icon{width:20px;height:20px}@media (forced-colors: active){.source-tile .folder-mask-svg{z-index:2}.source-tile .folder-hc-outline{stroke:ButtonText}.source-tile .folder-cover-outline{stroke:transparent}.source-tile .tile-photo-body{inset:0;height:auto;border:none;border-radius:0;clip-path:var(--tile-clip);-webkit-clip-path:var(--tile-clip)}.tile-menu-btn{color:ButtonText;border:2px solid ButtonText;background:Canvas;filter:none}}.tile-syncing{position:absolute;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-80);padding:var(--spacing-200);z-index:2}.tile-syncing-name{font-size:var(--font-size-subtitle-1-strong);line-height:var(--line-height-subtitle-1-strong);font-weight:var(--font-weight-subtitle-1-strong);color:var(--fg-neutral-1-rest);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.tile-syncing-text{font-size:var(--font-size-caption-1-strong);line-height:var(--line-height-caption-1-strong);font-weight:var(--font-weight-caption-1-strong);color:var(--fg-neutral-1-rest)}.tile-syncing.has-cover .tile-syncing-name{color:var(--fg-neutral-static-inverted);filter:var(--tile-text-shadow)}.tile-syncing.has-cover .tile-syncing-text{color:var(--fg-neutral-static-inverted);filter:var(--tile-counts-shadow)}.tile-progress{width:100%;height:var(--size-20);border-radius:var(--radius-circular);background:var(--folder-loading-bar-bg);overflow:hidden}.tile-syncing.has-cover .tile-progress{box-shadow:inset 0 0 0 1px var(--tile-progress-border),var(--effect-floating-background-shadow);backdrop-filter:var(--effect-floating-background-blur);-webkit-backdrop-filter:var(--effect-floating-background-blur)}.tile-progress-bar{height:var(--size-20);border-radius:var(--radius-circular);background:var(--bg-brand-rest);transition:width var(--anim-medium) ease}.tile-progress-bar.indeterminate{width:40%!important;animation:indeterminate 1.5s ease-in-out infinite}@keyframes indeterminate{0%{transform:translate(-100%)}to{transform:translate(300%)}}.source-tile.is-sources-upsell .sources-upsell-bg{background:var(--bg-neutral-3-rest)}.source-tile.is-sources-upsell .sources-upsell-bg:after{content:"";position:absolute;inset:0;background:var(--folder-bg-overlay);pointer-events:none}.source-tile.is-sources-upsell .folder-mask-svg{z-index:1}.source-tile.is-sources-upsell .folder-hc-outline{stroke:var(--surface-stroke-1);stroke-width:var(--size-20)}.source-tile.is-sources-upsell .tile-sources-upsell-icon-blur{position:absolute;inset:calc(-1 * var(--size-640));width:calc(100% + var(--size-640) + var(--size-640));height:calc(100% + var(--size-640) + var(--size-640));object-fit:cover;object-position:center;filter:var(--effect-command-strip-floating-blur);opacity:var(--folder-ghost-logo-opacity);pointer-events:none}.source-tile.is-sources-upsell .tile-name{color:var(--fg-neutral-1-rest);filter:none}@media (forced-colors: active){.source-tile.is-sources-upsell .folder-hc-outline{stroke:ButtonText}}.source-tile.is-sources-upsell .tile-counts{color:var(--fg-neutral-1-rest);filter:none}
