@use '@angular/material' as mat;
@use './app/styles/basic-html.scss';
@use './app/styles/dialog.scss';
@use './app/styles/material-overrides.scss';
@use './app/styles/post-card.scss';
@use './app/styles/settings.scss';
@use './app/styles/quil.scss';
@use './app/styles/theme-switcher.scss';
@use './app/styles/viewer.min.css';
@use './app/styles/viewer-overrides.scss';
@use './app/styles/vlite.css';
@use './app/styles/vlite-overrides.scss';
// BUG
// @use './app/styles/tags.scss';

// Color scheme default
@import './assets/themes/default.css';
@import './assets/fonts/inter.css';
@import './assets/fonts/firacode.css';

html {
  color-scheme: light dark;
  @include mat.theme(
    (
      color: mat.$violet-palette,
      density: 0
    )
  );
}

// HACK: Have to make dummy theme to initialize typography
$theme: mat.define-theme(
  (
    color: (
      primary: mat.$violet-palette
    )
  )
);

@include mat.typography-hierarchy($theme);

:root {
  @include mat.badge-overrides(
    (
      background-color: var(--mat-button-filled-container-color, var(--mat-sys-primary))
    )
  );
}

// Variables
:root {
  --wafrn-blue: light-dark(#125e59, #96d8d1);
  --mat-sys-label-small-size: 0.688rem;

  --info-card-info-background: light-dark(#d5e3fe, #3a475d);
  --info-card-warning-background: light-dark(#d7c3b8, #52443c);
  --mat-dialog-container-max-width: 960px;
}

// Fonts overrides
// I don't think this is defined anywhere else, should be fine either way.
// I hope to not use !important here eventually, so...
// TODO: No !important

:root,
body,
html {
  --mat-menu-item-label-text-font: Inter, sans-serif;
  font-family: Inter, sans-serif !important;
  font-feature-settings:
    'liga' 1,
    'calt' 1,
    'tnum' 1,
    'case' 1,
    'zero' 1,
    'ss01' 0,
    'ss02' 1 !important;
}

@supports (font-variation-settings: normal) {
  :root,
  body,
  html {
    --mat-menu-item-label-text-font: InterVariable, sans-serif;
    font-family: InterVariable, sans-serif !important;
    font-feature-settings:
      'liga' 1,
      'calt' 1,
      'tnum' 1,
      'case' 1,
      'zero' 1,
      'ss01' 0,
      'ss02' 1 !important;
  }
}

code {
  font-family: 'Fira Code', 'Fira Mono', monospace !important;
}

// Global style fixes
* {
  box-sizing: border-box;
  scrollbar-color: var(--mat-sys-outline-variant) transparent;
  scrollbar-width: thin;
}

html {
  height: 100%;
  background-color: var(--mat-sys-surface);
  overflow-wrap: anywhere;
  overflow-y: scroll;
}

body {
  min-height: 100%;
  margin: 0;
}

.wafrn-container {
  max-width: 800px;
}

.wafrn-container-wide {
  max-width: 1200px;
}

.wafrn-container-header {
  border-bottom: 2px dashed var(--mat-sys-outline-variant);
}

.wafrn-container-footer {
  border-top: 2px dashed var(--mat-sys-outline-variant);
}

.wafrn-content {
  padding-top: 1.5rem;
  padding-bottom: calc(64px + 1em);
  transition: margin 200ms ease-out;
}

// No JavaScript
#no-js {
  position: fixed;
  inset: 0;
  background: var(--mat-sys-background);
  cursor: wait;
  z-index: 99999999; // Go on top of splash screen!

  & .text-muted {
    color: var(--mat-sys-outline);
  }
}

// Pre-splash / Indieweb content
#indieweb {
  position: relative;
  min-height: 100dvh;
  inset: 0;
}

#microformats {
  max-width: 800px;
  border: 1px solid black;
  margin: 2em;
  padding: 1em;

  .h-card {
    display: flex;
    flex-flow: row wrap;

    border: 1px solid black;
    margin: 1em;

    .u-featured {
      object-fit: cover;
      order: 1;
      flex: 1 100%;
    }

    .u-photo {
      object-fit: contain;
      max-height: 5em;
      order: 2;
    }

    .p-name {
      order: 3;
      flex: 3 0px;
      align-self: center;
      padding: 1em;
      text-decoration: none;
    }
  }

  .h-entry {
    padding: 1em;
    border: 1px solid black;
    margin-bottom: 2em;
  }

  .u-uid,
  .dt-pubished,
  .u-in-reply-to {
    text-align: right;
    display: block;
  }
}

// Splashscreen
#splash {
  position: relative;
  min-height: 100dvh;
  inset: 0;
}

#splash {
  background: var(--mat-sys-background);
  cursor: wait;
  z-index: 2; // Minimum
  transition: display, opacity;
  transition-duration: 120ms;
  transition-behavior: allow-discrete;
  transition-timing-function: ease-in;
}

#splash-icon,
#splash-icon img {
  pointer-events: none;
  user-select: none;
}

#splash-text {
  margin: 0;
  margin-inline: 1rem;
  height: 0; // Do not shift image based on text height
  max-width: 40ch;
  text-align: center;
  color: var(--mat-sys-outline);
}

#splash-content {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  transition: translate 120ms ease-in;
}

#indieweb.loaded,
#splash.loaded {
  display: none;
  opacity: 0;

  & #splash-content {
    translate: 0 -6px;
  }

  & #microformats {
    translate: 0 -6px;
  }
}

// Utility styles
.subtle-link {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.force-comic-sans {
  font-family: 'Comic Sans MS', cursive, sans-serif;
}

/* Small-Screen media queries. */
/* Currently encompasses the bottom-sheet style for dialogs, as well as the full-width post style for narrow screens.*/
@media screen and (max-width: 800px) {
  /* START bottom-sheet */
  :root {
    --mat-dialog-container-shape: 16px 16px 0px 0px;
  }

  .cdk-global-overlay-wrapper {
    align-items: flex-end !important;
  }

  [id*='mat-mdc-dialog-'] {
    animation: 300ms slideup;
    --mat-dialog-transition-duration: 0ms !important;
  }

  @keyframes slideup {
    0% {
      transform: translateY(200%);
    }

    100% {
      transform: translateY(0%);
    }
  }

  /* END bottom-sheet */
  /* START fullwidth post style */
  mat-card {
    border-radius: 0px !important;
    margin-inline: 0px !important;
  }

  /* END fullwidth post style */

  /* Flush first post to match 0 margin sides*/
  .wafrn-content {
    padding-top: 0;
  }
}

.shortened-post {
  max-height: 450px;
  overflow: hidden;
}

/* Horizontal Media Carousel. Disabled by default. */
.media-gallery.media-carousel {
  --media-height: 100%;
  flex-direction: row !important;
  overflow-x: scroll;
  gap: 12px !important;
  align-items: center;

  app-wafrn-media {
    box-sizing: border-box;
    width: fit-content;
    flex-shrink: 0;
    border-radius: var(--mat-sys-corner-large);
    max-width: 95%;
  }

  .media-container {
    border-radius: var(--mat-sys-corner-large);
    max-height: var(--media-height);
  }

  .media-content-container {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--mat-sys-corner-large);
  }

  .media-content-container:has(.v-video) {
    height: fit-content;
  }

  .displayed-image {
    max-height: var(--media-height);
    border-radius: var(--mat-sys-corner-large) !important;
  }
}

.quoted-post .emojireact-button {
  background-color: var(--mat-sys-surface-container-highest) !important;
}

.w-50 {
  width: 50%;
}

.snappy-hide {
  display: none;
}

.tag {
  word-break: break-word;
}

mat-tab-header {
  margin-bottom: 12px;
}

// Workaround for bug with matTooltip
.mat-mdc-tooltip-trigger {
  touch-action: auto !important;
  -webkit-user-drag: auto !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sr-only-focusable {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;

  &:focus,
  &:active {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

.wafrn-toolbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10;
  justify-content: space-between;
  box-shadow: var(--mat-sys-level4);
  border-top: 1px solid var(--mat-sys-outline-variant);
  --mat-list-list-item-one-line-container-height: 52px;
  --mat-sys-hover-state-layer-opacity: 0;

  // Notch fixes
  --mat-toolbar-standard-height: calc(64px + env(safe-area-inset-bottom));
  --mat-toolbar-mobile-height: calc(56px + env(safe-area-inset-bottom));
  :root & {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

.wafrn-toolbar-section {
  display: flex;
  gap: 0.25rem;
}

.vertical-rule {
  border-right: 1px solid var(--mat-sys-outline-variant);
}

mat-drawer {
  background: var(--mat-sys-background);
  border-right: 1px solid var(--mat-sys-outline-variant)!important;
  box-shadow: none!important;
}