import styled from '@emotion/styled'
import { keyframes } from '@emotion/react'

export const BreadcrumbsWrapper = styled.div`
  padding: 12px;
`

const reveal = keyframes`
    0% {
        transform: scale(0.85, 0.85);
    }

    100% {
        transform: scale(1);
    }
`

export const StudentList = styled.ul`
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  width: 100%;
  
  @media (max-width: 768px) {
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  /* Стили для motion.li элементов */
  li {
    list-style: none;
    height: 100%;
  }

  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }

  .chakra-ui-dark &::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
  }

  .chakra-ui-dark &::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
  }
`

export const StudentListView = styled.ul`
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  width: 100%;
  
  /* Адаптивные отступы на разных экранах */
  @media (max-width: 768px) {
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
  
  /* Стили для контейнеров карточек */
  li {
    list-style: none;
    height: 100%;
    transform-origin: center bottom;
  }
  
  /* Добавляем плавные переходы между состояниями */
  li:hover {
    z-index: 10;
  }
  
  /* Стилизация скроллбара */
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }

  .chakra-ui-dark &::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
  }

  .chakra-ui-dark &::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
  }
`

export const QRCanvas = styled.canvas`
  display: block;
  aspect-ratio: 1 / 1;
  width: 450px;
  min-width: 450px;
  max-width: 100%;
  height: auto;
  
  @media (max-width: 768px) {
    width: 300px;
    min-width: auto;
  }
`

export const ErrorSpan = styled.span`
  color: var(--chakra-colors-red-100);
  display: block;
  padding: 16px;
  background-color: var(--chakra-colors-red-600);
  border-radius: 11px;

  .chakra-ui-dark & {
    color: var(--chakra-colors-red-200);
    background-color: var(--chakra-colors-red-800);
  }
`
