@use './variables' as *;

// Global structure.
// --------------------------------------------------------
:root {
  scroll-behavior: smooth;
  --w-base-color: #2c3e50;
  --code-color: #2399ee;
  --code-bg-color: color-mix(in srgb, var(--w-contrast-bg-color) 5%, transparent);
  --highlight-color: #ecf3f8;
  --headline-color: #376591;

  &[data-theme="dark"] {
    --w-base-color: rgba(#fff, 0.8);
    --code-color: #84deff;
    --code-bg-color: color-mix(in srgb, var(--w-contrast-bg-color) 12%, transparent);
    --highlight-color: #273134b5;
    --headline-color: #7292c5;
  }

  font: 15px 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--w-base-color);
}

aside {
  width: 220px;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 1.5rem 0 2rem;
  display: flex;
  justify-content: flex-end;
  z-index: 1;

  .nav {
    position: fixed;
    top: 70px;
    margin-right: -1px;
    overflow: hidden;
  }

  ul {
    position: relative;
    margin-left: 0;
    list-style-type: none;
  }

  .nav__item {
    position: relative;
    display: flex;
    padding: 6px 2rem 6px 0;
    justify-content: flex-end;
    font-size: 1.1rem;
    transition: 0.25s font-weight;
    // color: var(--w-base-color);

    &.router-link-active {
      font-weight: bold;
      text-transform: uppercase;
      color: var(--w-primary-color);
    }

    &:after, & ~ ul:after {
      content: '';
      position: absolute;
      inset: 0;
      border-right: 1px solid transparent;
      transform-origin: right;
      transform: scaleX(0);
      transition: 0.25s transform;
      z-index: 1;
      background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), color-mix(in srgb, var(--w-contrast-bg-color) 6%, transparent) 50%);
    }
    &:hover:after, &:hover ~ ul:after {
      border-right-color: color-mix(in srgb, var(--w-contrast-bg-color) 20%, transparent);
      transform: scaleX(1);
    }
    &.router-link-active:after, &.router-link-active ~ ul:after {
      border-right-color: var(--w-primary-color);
      background-image: linear-gradient(-90deg, var(--highlight-color), rgba(255, 255, 255, 0));
      transform: scaleX(-1) rotateY(180deg);
      z-index: -1;
    }
  }

  ul ul {
    padding-top: 4px;
    padding-bottom: 4px;

    &:after {
      border: 0.5px solid var(--w-primary-color);
      mask: linear-gradient(90deg, transparent, black 100%);
    }
  }
  ul ul .nav__item {
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 1rem;
    color: color-mix(in srgb, var(--w-base-color) 70%, transparent);

    &.router-link-active {
      text-transform: initial;
      background-image: linear-gradient(-90deg, var(--w-primary-color) -400%, rgba(255, 255, 255, 0));
    }
    &.router-link-active:before {
      content: '';
      position: absolute;
      inset: 0 0 0 auto;
      border: 12px solid transparent;
      border-right-color: var(--w-primary-color);
    }
    &.router-link-active:after {
      transition: none;
      content: '';
      position: absolute;
      inset: 0 -1px 0 auto;
      border: 12px solid transparent;
      border-right-color: var(--w-base-bg-color);
      z-index: 11;
    }
  }
}

.page {position: relative;}

main {
  padding-top: 65px; // 40 for the top bar height, + arbitrary 25 for spacing out.
  padding-left: 4rem;
  border-left: 1px solid color-mix(in srgb, var(--w-contrast-bg-color) 20%, transparent);
  flex-grow: 1;
}

.page-container {
  width: 100%;
  max-width: $page-max-width;
  margin-left: auto;
  margin-right: auto;
}

footer {
  display: flex;
  flex-grow: 0;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 0.9em;
  font-style: italic;
  margin: 1rem 0 0.5rem;
  line-height: 1;

  .w-icon {
    font-size: 1.2em;

    &.heart {transition: 1s ease-out;cursor: pointer;}
    &.heart:hover {animation: heart-pulse 1.8s ease-out infinite;}
  }
}

// Common styles.
// --------------------------------------------------------
a {
  text-decoration: none;
  color: var(--w-primary-color);
}

ul {
  margin-left: 16px;

  &.w-list {margin-left: 0;}
  &.no-bullet {list-style-type: none;}
}

// Shared classes & styles.
// --------------------------------------------------------
.ova {overflow: auto;}
.ovh {overflow: hidden;}
.todo-tag {
  background: var(--w-error-color);
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 99em;
  align-self: center;
  padding: 1px 10px 0;
}
.scrollable {
  height: 250px;
  overflow-y: scroll;
  padding-right: 1.8em;
}

.highlight-box {
  position: relative;
  background: linear-gradient(45deg, var(--highlight-color), rgba(255, 255, 255, 0));
  padding: 16px;
  border-radius: 8px;

  &:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid color-mix(in srgb, var(--w-contrast-bg-color) 20%, transparent);
    mask: linear-gradient(-145deg, #000 -40%, transparent 30%);
    pointer-events: none;
  }

  &:after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid color-mix(in srgb, var(--w-contrast-bg-color) 20%, transparent);
    mask: linear-gradient(45deg, #000, transparent 30%);
    pointer-events: none;
  }

  li {margin-top: 2px;}
  a {
    padding: 2px 12px 2px 10px;
    border-radius: 99em;

    &:hover {
      background-color: color-mix(in srgb, var(--w-contrast-bg-color) 8%, transparent);
    }
  }
  .w-icon.bolt {
    width: 68px;
    height: 68px;
    background-color: color-mix(in srgb, var(--w-contrast-bg-color) 5%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.message-box {
  width: 100%;
  max-width: 650px;
  margin: 0;

  &.w-alert {padding-left: 20px;}
}

div.ssh-pre {
  margin-top: 12px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.35;

  &[data-label] {
    margin-top: 12px;
    padding-top: 8px;
  }
  // Always add the label, even when not provided.
  &[data-type="html-vue"]:before {content: 'HTML';}
  &[data-type="js"]:before {content: 'JS';}
  &[data-type="css"]:before {content: 'CSS';}
  &[data-type="json"]:before {content: 'JSON';}

  &[data-type]:before,
  &[data-label][data-type]:before {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 12px;
    padding: 0;
    border: none;
    background: none;
    opacity: 0.3;
    font-family: monospace;
  }
  &--dark {background-color: #2d2d2d;}
}

.important-notes {
  font-weight: normal;
  font-size: 15px;

  small {
    display: block;
    font-size: 13px;
    line-height: 19px;
  }
}

// Hide todos in PROD.
.page.prod .todo-tag:not(.prod) {display: none;}

@keyframes heart-pulse {
  0%, 20%, 30%, 35%, 45%, 100% {transform: scale(1);}
  25%, 40% {transform: scale(1.3);}
}

// Media queries.
// --------------------------------------------------------
@media screen and (max-width: $sm) {
  aside {
    width: 170px;
    padding-left: 0;
    padding-right: 0;
  }

  main {padding-left: 2.5rem;}
}

@media screen and (max-width: 750px) {
  aside {display: none;}

  main {padding-left: 0;border-left: none;}
}

@media screen and (max-width: ($page-max-width + (2 * $container-padding-md))) {
  :root {--container-padding: #{$container-padding-md};}

  .page-container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }
}

@media screen and (max-width: (500 + (2 * $container-padding-sm))) {
  :root {--container-padding: #{$container-padding-sm};}
}
