@use "sass:color";
@use "../../../root/static/style/catppuccin" as theme;

h3 {
  margin-block-end: 0;
}

.qr {
  img { width: 100% }
  p { text-align: center; }

  &.blocks {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: calc(100vw - 1rem);
    max-width: 45rem;
    scroll: {
      behavior: smooth;
      snap-type: x mandatory;
    }

    &::-webkit-scrollbar { display: none; }

    &:hover .block.qr:not(:hover) {
      filter: blur(5px);
      transition: all 0.3s ease;
    }
  }

  &.block {
    flex: 0 0 calc(100vw - 2rem);
    scroll-snap-align: start;
    max-width: 13.666rem;
  }
}

.track {
  display: flex;

  &.active {
    box-shadow: theme.$green 0 0 5px 0;
  }

  img {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border-radius: .5rem;
  }
}

.steam {
  .block {
    display: flex;

    img {
      height: 7rem;
      margin-right: .5rem;
    }

    p {
      margin: .5rem 0;
    }
  }
}

table, tbody {
  vertical-align: baseline;
  border-collapse: collapse;

  tr {
    border-radius: 10px;

    &:hover {
      background-color: color.change(theme.$surface1, $alpha:75%);
    }

    th {
      text-align: unset;
    }

    th + td, td + td {
      padding-left: 2rem;
    }
  }
}

#pie:hover {
  animation: rotateY-animation 2s linear infinite;
  transform-style: preserve-3d;

  @keyframes rotateY-animation {
    to {
      transform: rotateY(0deg);
    }
    from {
      transform: rotateY(360deg);
    }
  }
}