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-left: 0px;
  height: 600px;
  justify-content: space-evenly;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  
  @media (max-width: 768px) {
    height: auto;
    max-height: 600px;
    padding-right: 0;
  }
`

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);
  }
`
