.file-selector {
  @apply -flex -flex-col -gap-2 -w-full;
}
.file-selector-box {
  @apply -relative -px-3 -py-2 -gap-0 -flex -h-auto -flex-col -justify-center -bg-primary-50/30 -border -border-dashed -border-primary-400 -ring-transparent;
  --state-color: rgba(var(--color-primary-500-rgb), .05);
}
.file-selector-box .text {
  @apply -text-primary-500;
}
.is-dragging .file-selector-box {
  @apply -border-solid;
}

.file-selector-btn {
  @apply -relative -flex -gap-2 -items-center;
}
.is-dragging .file-selector-btn {
  @apply -bg-primary-50;
}

.file-selector-input {
  @apply -absolute -inset-0 -opacity-10 -cursor-pointer -appearance-none;
}

.file-selector-tip {
  @apply -text-gray-400;
}

.file-selector.is-mode-button {
  @apply -flex-col-reverse;
}

.file-selector-list.is-empty {
  @apply -hidden;
}

.file-selector-item .item-avatar {
  @apply -text-gray-500 -bg-gray-50;
}
.file-selector-item .item-subtitle {
  @apply -text-gray-400;
}
.file-selector-item .item-content {
  @apply -flex-none -mr-1 -max-w-full;
}
.file-selector-item > .listitem:hover {
  @apply -bg-gray-500/5;
}
.file-selector-item.is-renaming .item-avatar + .item-content {
  max-width: calc(100% - 32px);
}
.file-selector-rename-text {
  @apply -relative -max-w-full -min-w-[100px];
}
.file-selector-rename-text > div {
  @apply -invisible -pointer-events-none -whitespace-nowrap -overflow-hidden;
}
.file-selector-rename-input {
  @apply -absolute -inset-0;
}

.file-selector-grid {
  @apply -p-2 -bg-surface-light -flex -flex-row -flex-wrap -gap-[--file-selector-grid-gap] -items-start -border -border-transparent -rounded;
}
.file-selector-grid-item {
  @apply -w-[--file-selector-grid-width] -h-[--file-selector-grid-height]
}
.file-selector-grid-btn {
  @apply -p-2 -gap-0 -flex -flex-col -justify-center -bg-primary-50/30 -border -border-dashed -border-primary-400 -ring-transparent -aspect-square -w-[--file-selector-grid-width] -h-auto;
  --state-color: rgba(var(--color-primary-500-rgb), .05);
}
.file-selector-grid-btn .text {
  @apply -text-primary-500;
}
.file-selector-grid-item .listitem {
  @apply -relative -w-full -h-full -flex-col -p-0;
}
.file-selector-grid-item .item-avatar {
  @apply -w-full -rounded -text-gray-500 -border;
}
.file-selector-grid-item .item-avatar.has-icon > .icon {
  font-size: calc(var(--file-selector-grid-width) / 2);
}
.file-selector-grid-item .item-content,
.file-selector-grid-item .toolbar {
  @apply -absolute -w-full -aspect-square -top-0 -right-0 -left-0
}
.file-selector-grid-item .item-title {
  @apply -absolute --bottom-5 -text-sm -left-0 -right-6 -overflow-hidden -whitespace-nowrap;
}
.file-selector-grid-item .item-subtitle {
  @apply -absolute -text-xs -bottom-1 -left-1 -bg-fore -text-canvas -px-1 -rounded-full -opacity-0 -transition-opacity;
}
.file-selector-grid-item:hover .item-subtitle {
  @apply -opacity-100;
}
.file-selector-grid-item .toolbar .btn[data-remove-file] {
  @apply -absolute -top-px -right-px -bg-inverse/50 -text-canvas -p-1.5;
}
.file-selector-grid-item .toolbar .btn[data-rename-file] {
  @apply -absolute --bottom-6 -right-0 -p-0;
}
.file-selector-grid .file-selector-rename {
  @apply -absolute -top-auto -bottom-0 -h-6;
}
.file-selector-grid  .file-selector-rename-text {
  @apply -w-full;
}
.is-dragging .file-selector-grid {
  @apply -bg-primary-50 -border -border-primary-400;
}
