// -----------------------------------------------------------------------------
// Card styles
// =============================================================================
// Base `.Card` wrapper styles and it's children elements.
//
// #! HOW MANY LEVELS DEEP SHOULD THE CHILDREN GO?
//    In GPS he says `.gl-` styles shouldn't be nested? But it seems natural to
//    give a design system children, and if they're not obvious HTML elements,
//    such as `<ul><li>` then they'll need a proper class, no?
//
// #! I'm still tempted to use a bastardisation of `ECSS` and `GPS`.
// -----------------------------------------------------------------
// There doesn't seem to be a silver bullet on how to do GPS, but it feels quite
// nice having definite wrappers (makes for flatter css), like `gl-Card` and
// `gl-Card_KeyPoint`. I removed `.gl-Card_Header` in favor for `.gl-Card header`,
// and it still feels weird! I guess GPS would frown on this kind of flat style,
// but in any case it's probably advisable to not nest ECSS style `.gl` classes
// much deeper than one level.
//
//    - Use decent HTML5 tags wherever possible: `aside`, `h1`, `section`, etc
//    - Where `div`s are used, consider naming after parent, i.e: `.gl-Card_KeyPoint`.
//      Go ask the guys at GPS and I'm sure they'll tell me I'm doing it wrong!
//
//1. A `p` tag isn't very descriptive, which is where `ECSS` would be explicit.
//   however, the `{{☆ Syntax (inline code)}}` describes things pretty well.
//
//   #! How can we be more descriptive? Just have in-place comments?
//
// 2. Should there ever be "Placeholder" classes added? For instance, you add
//    a descriptive wrapper but you don't have any styles for it yet.
//
//    - Should empty `.gl-` classes be discarded? The HTML element too?
//    - Sometimes it's nice to give the children a wrapper, to distinguish that
//      section. Is this a bad way to work?
//
//      #! See `.gl-Card_KeyPoint` wrapper.
//
// 3. Should an element that's nested inside it's parent be "flat" but "nested"
//    in ECSS/BEM style or is this disallowed?
//
//    #! `.gl-Card` -> `_KeyPoint`
//
// Anki mobile screen size -> iPad portrait
// ----------------------------------------
// > You could use `orientation: portrait` but AnkiMobile is practically useless
// > in landscape mode (and large text is pain to read in it's "letter box")
//
// Legibility with screen size is important, but it's probably easier to just
// use a `max-width` for every device width up to iPad portrait (768px). I'm
// also going to do it for ALL text, not just code blocks. Also a slight issue
// is #118, where the Anki Mobile app defaults to swipe gesture to launch menu.

.gl-Card {
  background: transparent;
  border-radius: var(--border-radius);
  overflow: hidden;  // Force the border-radius

  .nightMode & {
    color: var(--color-nightmode-text);  // #! Perhaps should live in RAW HTML
    border: 1px solid var(--color-nightmode-border);
  }
}

.gl-Card header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-evenly;
  align-items: baseline;
  background: var(--color-card-lll);
  border: var(--spacing-px) solid var(--color-card-lll);
  border-bottom: 1px solid #E5E4E2; // Not ideal when code block
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);

  .nightMode & {
    background: var(--color-nightmode-background-ddd);
    border: transparent;
  }
}

.gl-Card header h1 {
  flex: 0 0 100%;
  margin: 0 0 var(--spacing-one);
  padding: var(--spacing-half);
  border-bottom: var(--spacing-px) solid var(--color-card-ll);
  background: var(--color-card-llll);

  @media screen and (max-width: 768px) {
    font-size: var(--font-size-p);
  }

  &:only-child {
    margin-bottom: 0;  // #! I think this is if there's no h2?
  }

  &::before {
    content: '★ ';
  }

  .nightMode & {
    background: var(--color-nightmode-background-dddd);
  }
}

.gl-Card header h2 {
  margin: 0 0 var(--spacing-half);
  padding: 0 var(--spacing-half) var(--spacing-half);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);

  @media screen and (max-width: 768px) {
    font-size: var(--font-size);
  }

  .nightMode & {
    color: var(--color-nightmode-text-light);
  }
}

// 1
.gl-Card header p {
  font-size: var(--font-size-p);
  margin: 0 0 var(--spacing-half) 0;
  padding: 0 var(--spacing-half) var(--spacing-half);

  @media screen and (max-width: 768px) {
    font-size: var(--font-size);
  }
}

// 2
.gl-Card_KeyPoint {
  // pass
}

// 3 #!
.gl-Card_KeyPointNotes {
  margin-bottom: var(--spacing);
  padding: var(--spacing) var(--spacing-one);
  background: var(--color-card-lll);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  text-align: left;

  @media screen and (max-width: 768px) {
    font-size: var(--font-size-m);
  }

  ul, ol {
    margin-left: var(--spacing-one);

    > li {
      margin-left: var(--spacing-one);
    }
  }

  // {{Tags}}
  small {
    color: var(--color-card-l);  // #! This feels wrong to use `-card` var here
    font-variation-settings: 'CRSV' 1, 'slnt' -6; // #!
    margin-top: var(--spacing); // In case no `<p>` above
    text-align: center;
    display: block;
  }

  .nightMode & {
    color: var(--color-nightmode-text-light);
    background: var(--color-nightmode-background-d);
  }
}

.gl-Card footer {
  color: var(--color-card-l);     // #! This feels wrong using `-card` var here
  margin-bottom: var(--spacing);
  padding: 0 var(--spacing-one);
  text-align: center;

  @media screen and (max-width: 768px) {
    font-size: var(--font-size-m); // #! Should this be in `/partials/`?
  }

  .nightMode & {
    color: var(--color-card-ll);
  }
}


// Code styles -----------------------------------------------------------------
// We're being a little specific here so that it doesn't fuck up our
// `.gl-CodeBlock` or Skylighting's `.sourceCode span` classes. Our Key Point Notes
// remain monochrome.
//
// #! Should our code styles be here or someplace else?
// #! Both `pre` and `code` need to inherit here for some reason.
//
// Notes
// -----
// 1. #! Should the `header > p > code` have a background?
//     - `background: var(--color-code-light-background);`
//     - `padding: var(--spacing-quarter);` (like `.cloze`)

.gl-Card header code {
  background: transparent;

  b, strong,
  i, em {
    font-style: inherit;
    font-weight: inherit;
    text-decoration: none;
  }

  b, strong {
    color: var(--color-code-bold);
  }

  i, em {
    color: var(--color-code-italic);
    font-variation-settings: normal; // Overide `slnt` settings
  }

  .nightMode & {
    color: var(--color-nightmode-text);
  }
}

.gl-Card_KeyPointNotes {

  code {
    color: var(--color-ddd);

    .nightMode & {
      color: var(--font-color);
    }
  }

  pre code {
    text-align: left;
    background: transparent;
  }
}

.gl-Card footer code {
  .nightMode & {
    color: var(--font-color);
  }
}
