@layer theme, book;

@import url(../fonts/open-sans.css);

@import url(./theme/base.css) layer(theme);
@import url(./theme/high-school.css) layer(theme);
@import url(./theme/elm-school-3.css) layer(theme);
@import url(./theme/elm-school-2.css) layer(theme);

@layer book {
  * {
    margin: 0;
  }

  body {
    font-family: var(--base-font-face);
    line-height: var(--line-height);
    font-size: var(--base-font-size);
    background-color: var(--background-color);
    box-sizing: border-box;
  }

  .module.heading1, .module.heading1 * {
    --figure-media-bg: none;
  }

  .module[content-difficulty="min"] *, .module[content-difficulty="min_only"] * {
    --task-number-color: var(--task-number-content-difficulty-min-color);
  }

  .module[content-difficulty="basic"] *, .module[content-difficulty="basic_only"] * {
    --task-number-color: var(--task-number-content-difficulty-basic-color);
  }

  .module[content-difficulty="high"] * {
    --task-number-color: var(--task-number-content-difficulty-high-color);
  }

  content-head {
    display: flex;
    flex-direction: row;
    align-items: start;
  }

  .module.heading3 {
    margin-top: var(--margin-heading);
  }

  .module {
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
  }

  module-container {
    box-sizing: border-box;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }

  module-container.level-first {
    margin-top: var(--margin);
  }

  module-container:not(.level-first) {
    padding-top: var(--margin);
  }

  module-container:is(.container-middle,.container-last) {
    margin-top: 0;
    padding-top: 0;
  }

  module-container {
    border-left: var(--optional-special-border);
  }

  module-container:not(.level-special, .level-optional) {
    border-left-color: transparent;
  }

  .module.alone {
    border: var(--border);
    border-radius: var(--border-radius);
  }

  .module.first {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    border-top: var(--border);
    border-left: var(--border);
    border-right: var(--border);
  }

  .module.middle {
    border-left: var(--border);
    border-right: var(--border);
  }

  .module.last {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-left: var(--border);
    border-right: var(--border);
    border-bottom: var(--border);
  }

  .module.first, .module.middle {
    padding-bottom: var(--padding-content);
  }

  .module.middle, .module.last {
    padding-top: calc(var(--padding) / 2);
  }

  .module.first content-head, .module.alone content-head {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
  }

  .module h-4:not(:empty) {
    padding-bottom: var(--padding-content);
  }

  layout-er {
    display: flex;
    box-sizing: border-box;
  }

  h-4 {
    flex-grow: 1;
  }

  h1 {
    font-weight: var(--heading-1-weight);
    font-size: var(--heading-1-size);
  }

  h2 {
    font-size: var(--heading-2-size);
    font-weight: var(--heading-2-weight);
    color: var(--heading-2-color);
  }

  h3 {
    font-size: var(--heading-3-size);
    font-weight: var(--heading-3-weight);
    color: var(--text-color);
  }

  h4 {
    font-size: var(--heading-4-size);
    font-weight: var(--heading-4-weight);
    color: var(--text-color);
  }

  [slot="fig1"] {
    padding-bottom: 0;
    color: var(--figure-caption-color);
    font-size: var(--figure-caption-size);
  }

  [slot="fig2"] {
    font-size: var(--figure-source-size);
    color: var(--figure-source-color);
  }

  /*implementation heading 1*/
  .module.heading1 {
    border-radius: 0;
  }

  .module.heading1.first, .module.heading1.alone {
    color: var(--heading-1-color);
    background-color: var(--heading-1-bg);
    padding: 8rem var(--padding) 0.5rem;
  }

  .module.heading1.middle, .module.heading1.last {
    background-color: var(--heading-1-after-bg);
    padding-top: var(--padding-content);
    padding-left: var(--padding);
    padding-right: var(--padding);
  }

  /*implementation definition*/
  .module.definition {
    background-color: var(--definition-bg);
  }

  /*implementation exposed*/
  .module.exposed {
    background-color: var(--exposed-bg);
  }

  /*implementation extra*/
  .module.extra {
    background-color: var(--extra-bg);
    font-size: var(--extra-font-size);
  }

  /*implementation excerpt*/
  .module.excerpt {
    background-color: var(--excerpt-bg);
  }

  .module.excerpt, .module.excerpt * {
    --border: var(--excerpt-border);
  }

  .module.excerpt layout-er * {
    --widget-explain-word-bg: var(--excerpt-widget-explain-word-bg);
    --widget-explain-word-color: var(--excerpt-widget-explain-word-color);
  }

  /*implementation notion*/
  .module.notion {
    background-color: var(--term-bg);
  }

  /*implementation resource*/
  .module.resource {
    background-color: var(--resource-bg);
  }

  .module.resource, .module.resource * {
    --border: var(--resource-border);
  }

  .module.resource:is(.first, .alone) content-head {
    background-color: var(--resource-h4-bg);
  }

  .module.resource module-lb * {
    --table-head: var(--resource-table-head);
    --table-row: var(--resource-table-row);
    --table-row-even: var(--resource-table-row-even);
    --table-border: var(--resource-table-border);
  }

  /*implementation activity*/
  .module.activity {
    background-color: var(--activity-bg);
  }

  .module.activity, .module.activity * {
    --border: var(--activity-border);
  }

  .module.activity:is(.first, .alone) content-head:not(:empty) {
    background-color: var(--activity-h4-bg);
  }

  .module.activity module-lb * {
    --table-head: var(--activity-table-head);
    --table-row: var(--activity-table-row);
    --table-row-even: var(--activity-table-row-even);
    --table-border: var(--activity-table-border);
  }

  /*implementation collapse */
  .module.collapse[is-expanded] {
    border-left: var(--collapse-border);
    border-right: var(--collapse-border);
  }

  .module.collapse[is-expanded]:is(.alone, .first) {
    border-top: var(--collapse-border);
  }

  .module.collapse[is-expanded]:is(.last, .alone) {
    padding-bottom: var(--padding);
    border-bottom: var(--collapse-border);
  }

  .module.middle.collapse[is-expanded] {
    padding-bottom: var(--padding-content);
  }

  .module.collapse:is(.first, .alone) h-4 {
    display: none;
  }

  .module.collapse module-lb {
    display: none;
    padding-left: calc(var(--padding) / 1.5);
    padding-right: calc(var(--padding) / 1.5);
    padding-top: var(--padding-content);
  }

  .module.collapse[is-expanded] module-lb {
    display: flex;
    flex-direction: column;
  }

  /* resource, activity common */
  .module:is(.resource, .activity):is(.first, .alone) h-4:not(:empty) {
    padding: calc(var(--padding) / 2) var(--padding) calc(var(--padding) / 4) 0;
  }

  .module:is(.resource, .activity):is(.first, .alone) task-number:is(:not([data-number='0'])) {
    padding: calc(var(--padding) / 2) 0 calc(var(--padding) / 4) 0;
  }

  .module:is(.resource, .activity):is(.first, .alone) {
    padding: 0;
  }

  .module:is(.resource, .activity):is(.first, .alone) layout-er {
    padding-top: var(--padding);
    padding-left: var(--padding);
    padding-right: var(--padding);
  }

  .module:is(.resource, .activity):is(:has(h-4:not(:empty)), :has(task-number:not([data-number='0']))) layout-er {
    padding-top: var(--padding-content);
  }

  .module:is(.resource, .activity):is(.first, .alone) content-head {
    margin: 0;
    padding: 0 0 0 var(--padding);
  }

  .module:is(.resource, .activity):is(.first, .alone) content-head, .module:is(.resource, .activity):is(.first, .alone) content-head * {
    --text-color: white;
    --task-number-color: var(--text-color);
  }

  .module:is(.resource, .activity).middle layout-er {
    padding-bottom: var(--padding-content);
  }

  .module:is(.resource, .activity):is(.last, .middle) layout-er {
    padding-top: 0;
  }


  /* module with background common */
  .module:is(.resource, .activity, .notion, .excerpt, .extra, .exposed, .definition) layout-er {
    padding-left: var(--padding);
    padding-right: var(--padding);
  }

  .module:is(.notion, .excerpt, .extra, .exposed, .definition):is(.first, .alone) {
    padding-top: var(--padding);
  }

  .module:is(.resource, .activity, .notion, .excerpt, .extra, .exposed, .definition):is(.last, .alone) {
    padding-bottom: var(--padding);
  }

  .module:is(.notion, .excerpt, .extra, .exposed, .definition) content-head {
    padding-left: var(--padding);
    padding-right: var(--padding);
  }

  .module:is(.resource, .activity):is(.middle, .last) content-head {
    padding-left: var(--padding);
    padding-right: var(--padding);
  }


  widget-content {
    display: block;
    width: 100%;
  }

  widget-table {
    padding-top: calc(var(--padding-content) / 2);
    display: flex;
  }

  .widget-table-slot {
    display: block;
  }


  widget-custom-html, widget-jsx-graph {
    display: flex;
    overflow-x: auto;
    width: 100%;
    min-height: 3rem;
  }

  .text-justify {
    text-align: justify;
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  widget-math[display-mode] {
    display: block;
  }

  .content-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: calc(800px + 0.6rem);
  }

  font-color-success {
    color: var(--text-color-success);
  }

  font-color-danger {
    color: var(--text-color-danger);
  }

  font-color-blue {
    color: var(--text-color-blue);
  }

  font-color-orange {
    color: var(--text-color-orange);
  }

  widget-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  module-spacer.space {
    display: block;
    height: 5rem;
  }

  module-spacer.line {
    display: block;
    min-height: 2rem;
    border-top: 2px solid #999;
  }

  module-spacer.line-space {
    display: block;
    height: 5rem;
    border-top: 2px solid #999;
  }

  .accurate-whitespace {
    white-space: pre-wrap;
  }
}