@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --record-cover-side-lg: 10.5rem;
    --record-cover-side-md: 8rem;
    --record-cover-side-sm: 3.5rem;
  }

  input[type="search"]::-webkit-search-cancel-button {
    display: none;
  }

  body {
    @apply w-full h-full bg-[color:var(--tg-theme-bg-color)] text-[var(--tg-theme-text-color)];
  }
  input:focus {
    @apply outline-none;
  }
}

@layer utilities {
  .shading {
    @apply inset-0 w-full h-full bg-black/50 transition-all fixed bottom-0;
  }
}

@layer components {
  .album-grid,
  .artist-grid {
    @apply grid grid-cols-2 p-4 gap-4;
  }

  .album-grid,
  .artist-grid {
    & a {
      @apply flex flex-col gap-2 cursor-pointer;
    }
  }

  .album-grid {
    & .cover {
      @apply aspect-square rounded-lg bg-cover;
    }
  }

  .artist-grid {
    & img {
      @apply w-full rounded-full;
    }
    & p {
      @apply truncate text-center;
    }
  }

  .track-list,
  .artist-list {
    @apply flex flex-col p-4 gap-4;
  }

  .noscroll {
    @apply overflow-hidden;
  }

  .track-list,
  .artist-list {
    & a {
      @apply flex flex-row gap-2 items-center;
    }
  }

  .track-list .cover {
    @apply rounded-sm w-[var(--record-cover-side-sm)] h-[var(--record-cover-side-sm)] bg-cover;
  }

  .artist-list .cover {
    @apply rounded-full w-[var(--record-cover-side-sm)] h-[var(--record-cover-side-sm)];
  }

  .cover {
    background-position: center center;
  }

  .artist-header {
    @apply flex mb-4;
    min-height: 10rem;
    background-position: top;
    background-repeat: no-repeat;
    object-fit: fill;
    background-size: cover;
    & .name {
      @apply m-4 text-xl font-medium self-end;
      filter: invert(1);
      mix-blend-mode: difference;
    }
  }

  .artist {
    scrollbar-width: none; /* Firefox */
    &.track-list {
      & .record {
        @apply flex items-center gap-2;
      }
      &.conveyer {
        @apply grid grid-flow-col grid-rows-3 overflow-auto;
        &::-webkit-scrollbar {
          display: none;
        }
        & .record {
          width: calc(100vw - 4rem);
        }
      }
      & .cover {
        background-size: 100px;
      }
    }
  }
  .album-grid.conveyer {
    @apply grid-flow-col grid-cols-none gap-3 p-4 overflow-auto;
    &::-webkit-scrollbar {
      display: none;
    }
    & .cover {
      @apply w-[var(--record-cover-side-md)] h-[var(--record-cover-side-md)] rounded-md object-cover;
      background-size: 128px;
    }
    & .record {
      @apply flex flex-col w-fit;
    }
  }

  .placeholder {
    @apply p-4 gap-4 animate-pulse;
    & .entry {
      @apply flex gap-2 w-full;
    }
    & .image {
      @apply bg-[color:var(--tg-theme-secondary-bg-color)] rounded;
    }
    & .text-line {
      @apply bg-[color:var(--tg-theme-secondary-bg-color)] h-2 rounded;
    }
    & .text-line-sm {
      @apply w-24;
    }
    & .text-line-md {
      @apply w-16;
    }
    & .text-container {
      @apply flex flex-col  gap-2 justify-center;
    }

    &.album-grid {
      @apply grid grid-cols-2;
      & .entry {
        @apply flex-col h-48;
      }
      & .image {
        @apply w-full h-full;
      }
      &.conveyer {
        @apply grid-cols-none;
        & .entry {
          & .image {
            @apply h-32 w-32;
          }
        }
      }
    }
    &.track-list {
      @apply flex flex-col;
      & .image {
        @apply w-14 h-14;
      }
      & .entry {
        @apply flex-row;
      }
    }
    &.artist-list {
      @apply flex flex-col;
      & .image {
        @apply w-14 h-14;
      }
      & .entry {
        @apply flex-row;
      }
    }
    &.artist-list {
      & .image {
        @apply !rounded-full;
      }
      & .entry .text-container p:nth-child(2) {
        @apply hidden;
      }
    }
    &.track-list.album-entry {
      & .image {
        @apply hidden;
      }
      & .text-line-sm {
        @apply hidden;
      }
      & .entry {
        @apply p-2;
        & .text-container {
          @apply w-full;
        }
        & p {
          @apply w-full h-5;
        }
      }
    }
  }

  .btn {
    &.btn--icon {
      @apply flex items-center text-sm font-medium;
      & svg {
        @apply w-4 h-4;
      }
    }
  }

  .album-entry {
    @apply flex flex-col;
    & .headings {
      @apply m-4 grid text-center;
      & .title {
        @apply text-lg font-medium;
      }
    }
    & .artwork {
      @apply w-2/3 self-center rounded-lg shadow-lg mt-3 aspect-square object-cover;
    }
    & .track-list {
      @apply mt-0;
      counter-reset: track;
      & li {
        @apply flex justify-between items-center p-2;
        &:nth-child(2n + 2) {
          @apply bg-[color:var(--tg-theme-secondary-bg-color)] rounded-md;
        }
        & .track {
          @apply h-5 flex items-center text-sm gap-3 truncate w-full;
          &:before {
            @apply text-center h-full;
            counter-increment: track;
            content: counter(track);
          }
        }
      }
    }
  }

  .popup {
    @apply h-full bg-[color:var(--tg-theme-bg-color)] shadow-2xl rounded-t-lg w-full fixed bottom-0 overflow-auto z-10;
  }

  .form {
    @apply w-full p-4 flex gap-4 justify-between h-16;
  }

  .content-in-center {
    @apply flex justify-center items-center h-screen;
  }

  .filter {
    @apply px-4 flex gap-3 my-2;
  }

  .filter-button {
    @apply rounded-full bg-[color:var(--tg-theme-secondary-bg-color)] text-[color:var(--tg-theme-text-color)] px-2 py-0.5 text-sm font-medium capitalize border-2 border-transparent;
  }

  .filter-button.active {
    @apply border-blue-700;
  }

  .searchbar {
    @apply bg-[color:var(--tg-theme-secondary-bg-color)] h-full text-gray-900 text-[16px] rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full px-2.5 dark:border-gray-600 placeholder-[color:var(--tg-theme-hint-color)] dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
  }

  .top-bar {
    @apply flex flex-col z-10 fixed inset-0 bg-[color:var(--tg-theme-bg-color)] bg-opacity-90 backdrop-blur-xl justify-start h-fit;
  }

  .record__title-container {
    @apply text-[12px] w-fit;
  }
  .record__name {
    @apply font-semibold leading-tight line-clamp-2;
  }
  .record__artist {
    @apply dark:text-stone-400;
  }
}
