@import url("https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css");
@import url("https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css");

/** ROOT VARIABLES **/
:root {
  /** DROPZONE **/
  --mod-drop-zone-border-style: solid;
  --mod-drop-zone-border-width: 1px;
  --mod-drop-zone-corner-radius: 8px;
  --mod-drop-zone-padding: 16px;
  --mod-textfield-spacing-inline: 0;
  --mod-textfield-spacing-block-start: 0;
  --mod-textfield-spacing-block-end: 0;

  /** CARD **/
  --mod-card-horizontal-preview-padding: 0;
  --mod-card-horizontal-body-padding: 8px;
  --mod-button-border-width: 1px;

  /** THEME COLORS **/
  --primary-color: #044cd2;
  --primary-color-rgb: 4, 76, 210;
  --primary-color-hover: #0038a0;
  --primary-color-light: rgb(58, 86, 136);
  --primary-color-dark: #0c1423;
  --primary-text-color: white;
  --primary-opacity-color: 0.05;

  /** TOOLTIP **/
  --mod-tooltip-background-color-default: #000;

  /** SIZING **/
  --width-content: 768px;

  @media (max-width: 768px) {
    --width-content: 100%;
  }
}

/** GLOBAL RESET **/
html,
body {
  margin: 0;
  box-sizing: border-box !important;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
}

* {
  margin: 0;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

/** HIDDEN UNTIL DEFINED **/
:not(:defined) {
  visibility: hidden;
}

/** THEME STYLES **/
sp-theme {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ebebeb; /* --spectrum-gray-800, before it's loaded */
  height: 100vh;
  z-index: 1000;
  position: relative;
  --badge-opacity: 0.1;
  --is-light: 0;
  --is-dark: 1;
  --animation-invert: brightness(0) invert(1);
  --animation-bg-color: conic-gradient(
    var(--spectrum-gray-700),
    var(--spectrum-gray-100),
    var(--spectrum-gray-100),
    var(--spectrum-gray-100),
    var(--spectrum-gray-700)
  );

  &[color="light"] {
    background-color: #f8fafc;
    --primary-opacity-color: 0;
    --primary-opacity-blur: 0;
    --secondary-color: var(--spectrum-gray-100);
    --logo: url("/static/pages/aviron_logo.svg") !important;
    --background-white: #fff;
    --badge-opacity: 0;
    --is-light: 1;
    --is-dark: 0;
    --animation-invert: none;
    --aviron-unread-color: #fff;
    --aviron-read-color: rgba(229, 232, 236, 0.6);
    --animation-bg-color: conic-gradient(
      var(--primary-color),
      var(--spectrum-gray-100),
      var(--spectrum-gray-100),
      var(--spectrum-gray-100),
      var(--primary-color)
    );

    --spectrum-gray-75: #fafbfc;
    --spectrum-gray-100: #f4f6f8;
    --spectrum-gray-200: #e5e8ec;
    --spectrum-gray-300: #d1d5da;
    --spectrum-gray-400: #959da5;
    --spectrum-gray-500: #6a737d;
    --spectrum-gray-600: #586069;
    --spectrum-gray-700: #444d56;
    --spectrum-gray-800: #2f363d;
    --spectrum-gray-900: #24292e;
  }

  &[color="dark"] {
    --aviron-unread-color: rgba(var(--spectrum-gray-100-rgb), 1);
    --aviron-read-color: var(--spectrum-gray-75);

    background-color: #1d1d1d;
    --primary-opacity-color: 0.08;
    --primary-opacity-blur: 0.2;
    --secondary-color: transparent;
    --logo: url("/static/pages/aviron_logo_white.svg") !important;
  }
}

.hidden {
  display: none;
}

#home-content {
  max-height: calc(100vh - 70px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
  margin: auto;
  width: 1500px;
  max-width: 100%;
  overflow-y: auto;
}

.section-nav {
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.mobile-section-nav {
  display: none;

  @media (max-width: 768px) {
    display: flex;
    gap: 16px;
  }
}

*:has([list-mode]) .mobile-section-nav {
  visibility: hidden !important;
}

aviron-home-page.list-mode {
  flex-direction: column;
  gap: 0;
  width: 100%;
  border: 1px solid var(--spectrum-gray-200);
  border-radius: 16px;
}

.list-mode {
  width: 100%;
}