@layer base, primative, modifier, entity;

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');

/*
    STYLE GUIDE ::
    class: __attribute - ( __ ) signifies global attribute
    class: _attribute_ - ( _*_ ) signifies local attribute
    class: --attribute - ( -- ) signifies modifier

    variable: --my-attribute-id__opt-property--opt-modifier -- standard variable format
*/

@layer base {

   *,
   *::before,
   *::after {
      box-sizing: border-box;
   }

   :root {

      /* CONTANTS */

      --fmd_gold: 1.618;

      /* LAYOUT */

      --fmd_page__max-width: 900px;
      --fmd-page__header-height: 3rem;

      --fmd_padding--half: calc(var(--fmd_padding) * 0.5);
      --fmd_padding: 0.5rem;
      --fmd_padding--double: calc(var(--fmd_padding) * 2.0);

      --fmd_margin--half: calc(var(--fmd_margin) * 0.5);
      --fmd_margin: 0.5rem;
      --fmd_margin--double: calc(var(--fmd_margin) * 2);

      --fmd_border__width--half: calc(var(--fmd_border__width) / 2);
      --fmd_border__width: 0.25rem;
      --fmd_border__width--double: 0.5rem;
      --fmd_border__radius: 1.0rem;
      --fmd_border__radius--half: calc(var(--fmd_border__radius) * 0.5);

      /* COLORS */

      --fmd_color__theme: light-dark(#fdfdfd, #010101);
      --fmd_color__theme-inverse: light-dark(#010101, #fdfdfd);

      /* Light color theme */

      --fmd_color__font-l: light-dark(#fdfdfd, #010101);
      --fmd_color__bg-l: light-dark(#b2bec3, #2d3436);
      --fmd_color__fg-l: light-dark(#dfe6e9, #636e72);

      --fmd_color__pink-l: light-dark(#fd79a8, #e84393);
      --fmd_color__red-l: light-dark(#ff7675, #d63031);
      --fmd_color__orange-l: light-dark(#fab1a0, #e17055);
      --fmd_color__yellow-l: light-dark(#ffeaa7, #fdcb6e);
      --fmd_color__mint-l: light-dark(#55efc4, #00b894);
      --fmd_color__aqua-l: light-dark(#81ecec, #00cec9);
      --fmd_color__blue-l: light-dark(#74b9ff, #0984e3);
      --fmd_color__purple-l: light-dark(#a29bfe, #6c5ce7);

      /* Dark color theme */

      --fmd_color__font-d: light-dark(#010101, #fdfdfd);
      --fmd_color__bg-d: light-dark(#2d3436, #b2bec3);
      --fmd_color__fg-d: light-dark(#636e72, #dfe6e9);

      --fmd_color__pink-d: light-dark(#e84393, #fd79a8);
      --fmd_color__red-d: light-dark(#d63031, #ff7675);
      --fmd_color__orange-d: light-dark(#e17055, #fab1a0);
      --fmd_color__yellow-d: light-dark(#fdcb6e, #ffeaa7);
      --fmd_color__mint-d: light-dark(#00b894, #55efc4);
      --fmd_color__aqua-d: light-dark(#00cec9, #81ecec);
      --fmd_color__blue-d: light-dark(#0984e3, #74b9ff);
      --fmd_color__purple-d: light-dark(#6c5ce7, #a29bfe);
   }

   a {
      color: var(--fmd_color__blue-d);
      text-decoration: none;
   }

   body {
      position: relative;
      margin: var(--fmd_margin);

      color-scheme: dark;
      color: var(--fmd_color__font-d);
      background-color: var(--fmd_color__bg-l);

      font-family: 'Comfortaa';

      display: grid;
      grid-template-columns: 1fr;

      @media screen and (min-width: 900px) {
         grid-template-columns: auto max(var(--fmd_page__max-width)) auto;
      }
   }

   button {
      padding: var(--fmd_padding);

      display: grid;
      justify-content: center;
      align-content: center;

      font-family: 'Comfortaa';

      background-color: var(--fmd_color__theme);
      border: 1px solid var(--fmd_color__fg-d);
      border-radius: var(--fmd_border__radius--half);

      cursor: pointer;

      transition: linear 0.10s;

      @media screen and (min-width: 900px) {
         &:hover {
            color: var(--fmd_color__theme);
            background-color: var(--fmd_color__theme-inverse);
         }
      }

      @media screen and (max-width: 900px) {
         &:active {
            transition: none;
            color: var(--fmd_color__theme);
            background-color: var(--fmd_color__theme-inverse);
         }
      }

   }

   code {
      padding: calc(var(--fmd_padding--half) / 2) var(--fmd_padding);
      margin: 0;

      display: inline-grid;
      justify-items: center;
      align-items: center;

      background-color: var(--fmd_color__bg-l);
      border-radius: var(--fmd_border__radius--half);

      font-style: italic;

      >* {
         display: inline-grid;
      }
   }

   footer {
      position: absolute;
      top: 95vh;
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
      padding: var(--fmd_padding--half) var(--fmd_padding) var(--fmd_padding--half) var(--fmd_padding);
      margin: var(--fmd_margin--double) var(--fmd_margin) var(--fmd_margin--half) var(--fmd_margin);

      display: grid;
      justify-items: center;
      border-bottom: 1px solid var(--fmd_color__fg-d);

      font-weight: bold;
   }

   header {
      z-index: 10;
      width: 100%;
      top: 0;

      display: grid;
      overflow: visible;

      button {
         height: 2.5rem;
         border-radius: 0;
      }
   }

   hr {
      width: 100%;
      border: none;
      border-top: 1px solid var(--fmd_color__theme-inverse);
   }

   img {
      width: 75%;
      padding: var(--fmd_padding);
      margin: var(--fmd_margin);

      justify-self: center;
   }
}

@layer primative {

   /* LAYOUT  */

   .__view {
      position: relative;

      >:not(_panel_) {
         width: 100%;
         height: 100%;
         margin: 0;
      }

      >._panel_ {
         position: absolute;
         top: 0;
         left: 0;
      }
   }

   ._content_ {
      padding: var(--fmd_padding--half);
   }

   .__border {
      border: 1px solid var(--fmd_color__fg-d);
   }

   ._collapsible-content-view_ {
      position: absolute;
      width: 50%;
      height: 0;
      top: calc(100% + 9px);
      left: 25%;
      /* right: 100%; */

      overflow: hidden;

      background-color: var(--fmd_color__fg-l);

      transition: linear 0.15s;

      >* {
         padding: var(--fmd_padding--half);
         background-color: var(--fmd_color__fg-l);
         border: 1px solid var(--fmd_color__fg-d);
         border-top: none;
      }
   }

   .__collapsible {
      position: relative;

      display: grid;
      justify-items: center;

      >._collapsible-toggle_ {
         display: inline-block;
         width: 100%;
         padding: var(--fmd_padding--half);

         font-weight: bold;

         &::before {
            color: var(--fmd_color__blue-d);
            content: '+\a0';
         }

         &.--open::before {
            color: var(--fmd_color__red-d);
            content: '-\a0';
         }
      }

      >._collapsible-content-view_ {
         position: absolute;
         top: calc(100%);
         width: 98%;
         height: 0;

         overflow: hidden;

         background-color: var(--fmd_color__fg-l);

         transition: linear 0.15s;

         >* {
            padding: var(--fmd_padding--half);
            background-color: var(--fmd_color__fg-l);
            border: 1px solid var(--fmd_color__fg-d);
            border-top: none;
         }

      }
   }

   /* Column container */
   .__mcol {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: row;
      gap: var(--fmd_padding);
   }

   .__mcol-inline {
      display: inline-flex;
      flex-direction: row;
      gap: var(--fmd_padding);
   }

   .__mlist {
      display: grid;
      gap: var(--fmd_padding--half);
   }

   /* FONTS */

   /* Font descriptor */
   .__descriptor {
      margin-top: 0.25rem;
      font-size: 0.75em;
   }

   .__bttn:hover {
      color: var(--fmd_color__theme-inverse)
   }
}

@layer modifier {

   /* LAYOUT */

   /* Center element */
   .--center-on-body {
      @media screen and (min-width: 900px) {
         grid-column: 2;
      }
   }

   /* Align elements to edges */
   .--move-to-edges {
      justify-content: space-between;
   }

   /* Hide element */
   .--hide {
      display: none;
   }

   /* COLOR */

   /* Clear background */
   .--clear_bg {
      background-color: inherit;
      border: none;
   }

   .--bg_theme {
      background-color: var(--fmd_color__theme);
   }

   /* FONT */

   /* Center text */
   .--center_font {
      text-align: center;
   }

   .--font-size-half {
      font-size: .5rem;
   }

   .--font-size-3-4 {
      font-size: .75rem;
   }

   .--font-size-1 {
      font-size: 1rem;
   }

   .--font-size-5-4 {
      font-size: 1.25rem;
   }

   .--font-size-6-4 {
      font-size: 1.5rem;
   }

   .--font-size-double {
      font-size: 2rem;
   }

   .--font-size-to-screen {
      font-size: max(min(1.25rem), 3vmin);
   }

   .--b {
      font-weight: bold;
   }

   .--i {
      font-style: italic;
   }

   /* UX */

   .--clickable {
      cursor: pointer;
   }

   .--transition {
      transition: linear 0.25s;
   }
}

@layer entity {

   #header-title {
      display: grid;
   }

   #subcard {
      width: min(75vw);
      padding: var(--fmd_padding);
      margin-bottom: var(--fmd_margin--double);

      display: grid;
      justify-self: center;

      background-color: var(--fmd_color__fg-l);
      border: 1px solid var(--fmd_color__fg-d);
      border-radius: var(--fmd_border__radius--half);

      @media screen and (min-width: 900px) {
         width: calc(var(--fmd_gold) * 12rem);
         margin-right: var(--fmd_margin--double);
         float: left;
      }

      >.collapsible_ {

         >._button {
            border-radius: 1rem;

            transition: .33s;

            &::before {
               content: "open\a0";
            }

            &.active {
               background-color: var(--color__theme);

               &::before {
                  content: "close\a0";
               }
            }
         }

         >._content {
            padding: 0;
            width: 100%;

            transition: .5s;
         }
      }
   }

   @scope(#fmd-view) {
      & {
         height: max(50vh);
         margin-top: var(--fmd_margin);
         position: relative;
         border: 1px solid var(--fmd_color__fg-d);
         overflow: hidden;
      }

      >#text-editor-panel>._content_ {
         z-index: 0;
         width: 100%;
         height: 100%;
         background-color: var(--fmd_color__fg-l);
         resize: none;
         overflow-y: auto;
         outline: none;
         border: none;
      }

      >#html-output-panel {
         position: absolute;
         top: 0;
         left: 100%;

         background-color: var(--fmd_color__fg-l);

         overflow-y: auto;

         &.--open {
            left: 0;
         }
      }

      >#guide-text-panel {
         position: absolute;
         top: 0;
         left: -100%;

         background-color: var(--fmd_color__fg-l);

         overflow-y: auto;

         &.--open {
            left: 0;
         }
      }

      >#error-output-panel {
         position: absolute;
         height: 50%;
         top: 100%;

         color: var(--fmd_color__font-l);
         background-color: var(--fmd_color__bg-d);

         &.--open {
            top: 50%;
         }
      }
   }
}