pl-fe: don't want tailwind here

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/styles/new/drive.scss

@@ -6,36 +6,66 @@
   }
 
   .⁂-drive-file {
-    @apply relative flex w-32 flex-col items-center gap-2;
+    position: relative;
+    display: flex;
+    width: 8rem;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
 
-    .⁂-icon-button {
-      @apply text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-500;
-
-      svg {
-        @apply h-4 w-4;
-      }
+    .⁂-icon-button svg {
+      height: 1rem;
+      width: 1rem;
     }
 
     &__button {
-      @apply opacity-0 absolute self-end transition-opacity duration-200;
+      opacity: 0;
+      position: absolute;
+      transition: opacity 0.2s;
+      right: 0;
     }
 
     &:hover, &:focus {
       .⁂-drive-file__button {
-        @apply opacity-100;
+        opacity: 1;
       }
     }
 
     img {
-      @apply pointer-events-none size-24 overflow-hidden object-cover;
+      pointer-events: none;
+      height: 6rem;
+      width: 6rem;
+      overflow: hidden;
+      object-fit: cover;
     }
 
     &__icon {
-      @apply m-2 size-20 text-gray-800 dark:text-gray-200;
+      margin: 0.5rem;
+      height: 5rem;
+      width: 5rem;
+      color: rgb(var(--color-gray-800));
+
+      &:is(.dark *) {
+        color: rgb(var(--color-gray-200));
+      }
     }
 
     &__label {
-      @apply mt-auto line-clamp-3 inline max-w-full text-ellipsis rounded bg-gray-900 px-2 py-1 text-xs font-medium text-white;
+      margin-top: auto;
+      overflow: hidden;
+      display: inline;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      max-width: 100%;
+      text-overflow: ellipsis;
+      border-radius: 0.25rem;
+      background-color: rgb(var(--color-gray-900));
+      padding: 0.25rem 0.5rem;
+      font-size: 0.75rem;
+      line-height: 1rem;
+      font-weight: 500;
+      color: #fff;
     }
   }
 }