main, main * {
box-sizing: border-box;
}
.fw {
width: 100%;
resize: vertical;
}
.files-list {
content-visibility: auto;
display: grid;
row-gap: 8px;
grid-template-columns: 1fr;
}
.file-item {
content-visibility: auto;
}
.files-list > div {
overflow: hidden;
display: grid; padding: 16px 0;
border-top: 1px solid #eee;
grid-template-areas: "icon name    size"
"icon options size";
grid-template-columns: 80px 2fr 1fr;
column-gap: 1em;
row-gap: 0.5  em;
.file-icon   {
grid-area: icon;
max-width: 100%;
margin: auto;
}
.file-title  { grid-area: name; }
.file-size   {
text-align: center;
grid-area: size;
font-size: 80%;
}
.file-actions {
font-weight: 100;
font-size: 80%;
margin: 0; padding: 0;
grid-area: options;
list-style: none;
display: grid;
grid-auto-flow: column;
grid-template-columns: min-content;
column-gap: 1em; li {
display: inline-block;
cursor: pointer
}
a {
transition: background 0.35s, text-decoration 0.35s;
padding: 4px 7px;
border-radius: 4px;
text-decoration: none;
background: #fff;
}
a:not(:hover) {
color: #333;
}
a:hover {
text-decoration: underline;
background: #f8f8f8;
}
}
& > * {
align-content: center;
align-self: center;
}
a {
flex: 1 0 auto;
}
}