@use "sass:color";

// Palette: Catppuccin Mocha
// https://catppuccin.com/palette/
$base: #1e1e2e;
$text: #cdd6f4;

$mantle: #181825;
$crust: #11111b;

$overlay0: #6c7086;
$overlay1: #7f849c;
$overlay2: #9399b2;

$surface0: #313244;
$surface1: #45475a;
$surface2: #585b70;

$subtext0: #a6adc8;
$subtext1: #bac2de;

$red: #f38ba8;
$green: #a6e3a1;
$peach: #fab387;
$blue: #89b4fa;
$mauve: #8839ef;

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

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

  tr {
    border-radius: 10px;

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

    th {
      text-align: unset;
    }

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