@use "sass:map";

$breakpoints: (
  // Small (landscape phones)
  // Font size: 17px
        sm:
        (
                breakpoint: 576px,
                viewport: 510px,
                root-font-size: 106.25%,
        ),
  // Medium (tablets)
  // Font size: 18px
        md:
        (
                breakpoint: 768px,
                viewport: 700px,
                root-font-size: 112.5%,
        ),
  // Large
  // Font size: 19px
        lg:
        (
                breakpoint: 1024px,
                viewport: 950px,
                root-font-size: 118.75%,
        ),
  // Max out at lg breakpoint
        xl:
        (
                breakpoint: 1024px,
                viewport: 950px,
                root-font-size: 118.75%,
        ),
        xxl:
        (
                breakpoint: 1024px,
                viewport: 950px,
                root-font-size: 118.75%,
        ),
);
@use "@picocss/pico/scss/pico" with (
  $theme-color: "azure",
  $breakpoints: $breakpoints,
  $enable-semantic-container: true,
  $enable-classes: true,
  $modules: (
    // Theme
    "themes/default": true,

    // Layout
    "layout/document": true,
    "layout/landmarks": true,
    "layout/container": true,
    "layout/section": true,
    "layout/grid": true,
    "layout/overflow-auto": false,

    // Content
    "content/link": true,
    "content/typography": true,
    "content/embedded": true,
    "content/button": true,
    "content/table": false,
    "content/code": true,
    "content/figure": false,
    "content/miscs": true,

    // Forms
    "forms/basics": true,
    "forms/checkbox-radio-switch": true,
    "forms/input-color": true,
    "forms/input-date": false,
    "forms/input-file": true,
    "forms/input-range": false,
    "forms/input-search": false,

    // Components
    "components/accordion": true,
    "components/card": true,
    "components/dropdown": true,
    "components/group": true,
    "components/loading": true,
    "components/modal": false,
    "components/nav": true,
    "components/progress": false,
    "components/tooltip": false,

    // Utilities
    "utilities/accessibility": true,
    "utilities/reduce-motion": true
  )
);
@use "@picocss/pico/scss/colors" as *;

@media (min-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
  :root {
    scrollbar-gutter: stable both-edges;
  }
}

[data-theme=light],
:root:not([data-theme=dark]) {
  --pico-code-kbd-color: #000;
  --pico-code-kbd-background-color: #fff;
  --progress-background-color: #{rgba($slate-100, 0.75)};
  --progress-stripe-color: rgba(0, 0, 0, 0.15);
  --text-shadow: none;
}

@mixin pico-theme-dark {
  --pico-background-color: #181c25;
  --pico-card-background-color: #1b1f29;
  --pico-dropdown-background-color: #1b1f29;
  --pico-code-kbd-color: #fff;
  --pico-code-kbd-background-color: #333;
  --progress-background-color: #{rgba($slate-800, 0.75)};
  --progress-stripe-color: rgba(255, 255, 255, 0.15);
  --text-shadow: 0px 1px 2px var(--text-shadow-color, oklab(0% 0 0/.2)),
    0px 3px 2px var(--text-shadow-color, oklab(0% 0 0/.2)),
    0px 4px 8px var(--text-shadow-color, oklab(0% 0 0/.2));
}

[data-theme=dark] {
  @include pico-theme-dark;
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    @include pico-theme-dark;
  }
}

@font-face {
  font-family: 'icons';
  src: url('../assets/icons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  font-size: 0.9em;
  line-height: 1em;

  &:before {
    display: inline-block;
    width: 1em;
    font-family: "icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-decoration: inherit;
    text-align: center;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

.icon-history:before { content: '\e800'; }
.icon-cog:before { content: '\e801'; }
.icon-theme-light-dark:before { content: '\e802'; }
.icon-chart-line:before { content: '\e803'; }
.icon-github:before { content: '\e804'; }
.icon-left-open:before { content: '\e805'; }
.icon-right-open:before { content: '\e806'; }
.icon-copy:before { content: '\e807'; }
.icon-cancel:before { content: '\e808'; }
.icon-code:before { content: '\e809'; }

.icon-gc:before { content: '\ea00'; }
.icon-wii:before { content: '\ea01'; }
.icon-n64:before { content: '\ea02'; }
.icon-gba:before { content: '\ea03'; }
.icon-nds:before { content: '\ea04'; }
.icon-switch:before { content: '\ea05'; }
.icon-ps:before { content: '\ea06'; }
.icon-ps2:before { content: '\ea07'; }
.icon-xbox360:before { content: '\ea08'; }
.icon-3ds:before { content: '\ea09'; }
.icon-xbox:before { content: '\ea0a'; }
.icon-win32:before { content: '\ea0b'; }
.icon-psp:before { content: '\ea0c'; }

// Override the tooltip component
[data-tooltip]:not(a, button, input) {
  border-bottom: none;
  cursor: pointer;
}

nav > ul {
  white-space: nowrap;
  text-overflow: ellipsis;

  &:first-child {
    > li:first-child * {
      color: var(--pico-contrast);
    }

    > li:not(:last-child):after {
      display: inline-block;
      width: 0;
      vertical-align: baseline;
      content: "/";
      padding-left: 10px;
    }

    @media (max-width: map.get(map.get($breakpoints, "lg"), "breakpoint")) {
      > li:has(+ .md):after {
        display: none;
      }
    }

    @media (max-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
      > li:not(:first-child) {
        display: none;
      }

      > li:not(:last-child):after {
        display: none;
      }
    }
  }
}

#theme-toggle {
  font-size: 1.33rem;
  vertical-align: middle;
  text-decoration: none;
}

pre {
  scrollbar-width: thin;
}

$progress-height: 2rem;

.progress-root {
  display: flex;
  height: $progress-height;
  overflow: hidden;
  border-radius: var(--pico-border-radius);
  background-color: var(--progress-background-color);
  margin-bottom: var(--pico-spacing);
  pointer-events: auto;
  box-shadow: var(--pico-box-shadow);

  .progress-section.striped {
    background-image: linear-gradient(
                    45deg,
                    var(--progress-stripe-color) 25%,
                    transparent 25%,
                    transparent 50%,
                    var(--progress-stripe-color) 50%,
                    var(--progress-stripe-color) 75%,
                    transparent 75%,
                    transparent);
    background-size: calc(1.25rem) calc(1.25rem);
    background-repeat: repeat;
  }

  &.code {
    .progress-section:nth-of-type(1) {
      background-color: $jade-400;
    }

    .progress-section:nth-of-type(2) {
      background-color: $jade-500;
    }

    .progress-section:nth-of-type(3),
    .progress-section.fuzzy {
      background-color: transparent;
    }
  }

  &.data {
    .progress-section:nth-of-type(1) {
      background-color: $azure-400;
    }

    .progress-section:nth-of-type(2) {
      background-color: $azure-500;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .progress-root .progress-section.striped {
    animation: none;
  }
}

$unit-size: 0.75rem;

.units-root {
  display: flex;
  flex-flow: row wrap;
  margin-bottom: var(--pico-spacing);

  .unit {
    width: $unit-size;
    height: $unit-size;
    background-color: #333;

    &:hover {
      border: 1px solid #fff;
    }
  }
}

.muted {
  color: var(--pico-muted-color);

  a {
    color: var(--pico-muted-color);
  }
}

#treemap {
  width: 100%;
  aspect-ratio: 2 / 1;
  margin-bottom: var(--pico-spacing);
  touch-action: none;
  // Accessed via JS
  --font-weight: normal;
  --font-size: 0.875rem;
  --font-family: var(--pico-font-family);
  --tooltip-background: var(--pico-contrast-background);
  --tooltip-color: var(--pico-contrast-inverse);
}

.project {
  position: relative;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--pico-border-radius);
  contain: content;
  overflow: hidden;
  transition: box-shadow var(--pico-transition);
  text-shadow: var(--text-shadow);

  a, [title] {
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
  }

  // Move the focus ring to the outer container, otherwise
  // contain: content or overflow: hidden will clip it
  &:has(> .project-link:focus) {
    box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
  }
}

.project-link {
  position: absolute;
  inset: 0;
  z-index: -1;

  // See above
  &:focus {
    box-shadow: none;
  }
}

.project-image-container {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  contain: strict;
}

.project-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  transition: all .5s ease;
  filter: blur(3px);
  transform: scale(1);
  will-change: transform;
}

.project {
  &:hover, &:focus-within {
    .project-image {
      transform: scale(1.02);
      opacity: 0.3;
      filter: blur(0);
    }
  }
}

.project-header {
  display: flex;
  align-items: center;
  gap: var(--pico-spacing);
  margin-bottom: var(--pico-typography-spacing-vertical);

  .project-title {
    flex: 1 1 auto;
    margin-bottom: 0;
    text-wrap: balance;
  }

  .platform-icon {
    font-size: 1.5rem;
    align-self: start;
  }
}

@media (max-width: map.get(map.get($breakpoints, "lg"), "breakpoint")) {
  .md {
    display: none !important;
  }
}

@media (min-width: map.get(map.get($breakpoints, "lg"), "breakpoint")) {
  .sm {
    display: none !important;
  }
}

.title-group {
  margin-top: calc(var(--pico-block-spacing-vertical) * 2);
}

blockquote {
  text-wrap: balance;
}

body > footer {
  display: flex;
  justify-content: space-between;

  // Log out button
  form {
    display: inline;

    input[type="submit"] {
      padding: .3em;
      margin: 0;
      background: none;
      border: none;
      width: auto;
      font-size: .875em;
      height: auto;
    }
  }
}

@media (max-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
  body > footer {
    flex-flow: column;
    align-items: center;
  }
}

#tooltip {
  --arrow-size: 0.3rem;
  position: absolute;
  z-index: 99;
  opacity: 0;
  padding: 0.25rem 0.5rem;
  border-radius: var(--pico-border-radius);
  background: var(--pico-contrast-background);
  color: var(--pico-contrast-inverse);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .1s ease, left .1s ease, top .1s ease;
  margin-top: calc(var(--arrow-size) * -1);
  font-style: normal;
  font-weight: var(--pico-font-weight);
  font-size: .875rem;

  &::after {
    content: "";
    position: absolute;
    display: block;
    border-top: var(--arrow-size) solid var(--pico-contrast-background);
    border-left: var(--arrow-size) solid transparent;
    border-right: var(--arrow-size) solid transparent;
    top: 100%;
    left: calc(var(--arrow-left) - var(--arrow-size));
    z-index: 100;
    transition: left .1s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  #tooltip, #tooltip::after {
    transition: none;
  }
}

.info-card {
  background-color: $azure-500;
  color: $white;
}

.warning-card {
  background-color: $pumpkin-550;
  color: $white;
}

.error-card {
  background-color: $red-650;
  color: $white;
}

.loading-container {
  display: flex;
  justify-content: center;
  margin: var(--pico-spacing);
}

.actions {
  float: right;
  position: relative;
  margin-inline-start: 1em;

  .dropdown {
    summary {
      &::after {
        margin-inline-start: 0;
        transform: none;
        height: 100%;
      }
    }

    ul li {
      text-align: left;
    }
  }
}

details.dropdown {
  clear: right;

  summary + ul {
    max-height: 50vh;
    overflow-y: auto;
  }
}

.repo-link {
  float: right;
  margin-inline-start: 1em;
}

label:has(> input[type="checkbox"]) {
  margin-bottom: var(--pico-spacing);
}

.platform-grid {
  margin-top: calc(var(--pico-block-spacing-vertical) * -2);
}

.platform-dropdown {
  margin: 0;

  li.platform-item {
    display: flex;
    padding: 0 !important;
    flex: 1;

    label {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 0.5em;
      margin: 0;
      padding-inline-start: var(--pico-spacing);

      .platform-icon {
        color: var(--pico-form-element-color);
        font-size: 2em;
      }
    }

    button {
      padding: 0.25em 0.5em;
      margin: 0.25em;
      margin-inline-end: var(--pico-spacing);
    }

    .count-badge {
      font-size: 0.8em;
      background: var(--pico-code-kbd-background-color);
      color: var(--pico-code-kbd-color);
      border-radius: 1em;
      min-width: 1.5em;
      height: 1.5em;
      padding: 0 0.5em;
      text-align: center;
    }
  }
}

.mt-spacing {
  margin-top: var(--pico-spacing);
}