/** Explorer **/
.vlx-explorer { display: block; }
.vlx-explorer--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 16px; }



/** Explorer > Actions **/
.vlx-explorer__actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 16px; }

.vlx-explorer__view-toggle { display: inline-flex; gap: 4px; padding: 4px; background-color: var(--bg-clr-dark); border-radius: var(--br-small); }
.vlx-explorer__view-toggle a { display: grid; place-items: center; width: 36px; height: 32px; border-radius: var(--br-small); transition: background-color var(--timing); }
.vlx-explorer__view-toggle a .vlx-icon { --clr: var(--text-clr); }
.vlx-explorer__view-toggle a.--active { background-color: var(--bg-clr); box-shadow: var(--box-shadow); }
.vlx-explorer__view-toggle a.--active .vlx-icon { --clr: var(--accent); }



/** Explorer > Drag and drop **/
.vlx-explorer [draggable="true"] { cursor: grab; }
.vlx-explorer .--dragging { opacity: .45; cursor: grabbing; }
.vlx-explorer .--drop-target { outline: 2px dashed var(--accent-secondary); outline-offset: -3px; background-color: var(--accent-secondary-trans-20); }



/** Explorer > Status **/
.vlx-explorer__drop-hint,
.vlx-explorer__status { --fs: var(--fs-small); --clr-text: var(--title-clr); margin-bottom: 8px; padding: 12px 16px; background-color: var(--accent-secondary-trans-20); border: 1px solid var(--accent-secondary-trans-50); border-radius: var(--br-small); }
.vlx-explorer__drop-hint[hidden],
.vlx-explorer__status[hidden] { display: none; }
.vlx-explorer__status.--error { --clr-text: var(--red-700); background-color: var(--red-100); border-color: var(--red-200); }

.vlx-explorer--cards .vlx-explorer__drop-hint,
.vlx-explorer--cards .vlx-explorer__status { grid-column: 1 / -1; margin-bottom: 0; }



/** Explorer > Empty **/
.vlx-explorer__empty { display: grid; justify-items: center; gap: 8px; padding: 64px 24px; text-align: center; }
.vlx-explorer__empty > .vlx-icon { --w: 32px; --h: 32px; --clr: var(--text-clr); }
.vlx-explorer__empty h2 { --fs: var(--fs-h5); }

.vlx-explorer--cards .vlx-explorer__empty { grid-column: 1 / -1; }



/** Explorer > New modal **/
.vlx-explorer__choices { display: grid; gap: 8px; }
.vlx-explorer__choices[hidden] { display: none; }

.vlx-explorer__choice { display: grid; grid-template-columns: 48px 1fr 16px; align-items: center; gap: 16px; width: 100%; padding: 16px; color: inherit; text-align: left; background-color: var(--bg-clr-dark); border: none; border-radius: var(--br); cursor: pointer; transition: transform var(--timing); }
.vlx-explorer__choice:hover { transform: scale(1.02); }
.vlx-explorer__choice > span:nth-child(2) { display: grid; gap: 4px; }
.vlx-explorer__choice small { font-size: var(--fs-small); }

.vlx-explorer__choice-icon { display: grid; place-items: center; width: 48px; height: 48px; background-color: var(--bg-clr); border-radius: var(--br-small); }
.vlx-explorer__choice-icon .vlx-icon { --w: 20px; --h: 20px; --clr: var(--accent); }

.vlx-explorer__folder-form[hidden] { display: none; }



@media (max-width: 785px) {
    .vlx-explorer__actions { width: 100%; justify-content: flex-start; }
    .vlx-explorer--cards { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 8px; }
}