mathigon.scss

/* Override of Mathigon styles */
@import '../../../node_modules/carbon-components/scss/globals/scss/typography';
@import '../variables/colors.scss';
@import '../variables/mq.scss';
@import '../variables/fonts.scss';

x-blank, x-blank-mc {
  .target {
    background-color: $background-color-lighter;
    border-top: 1px solid $block-border-color-secondary;
    border-bottom: 1px solid $block-border-color-secondary;
    border-radius: 0;
    color: $text-color-light;
    min-width: 50px; 
    line-height: 20px; 
    padding: 2px 12px;
  }

  &.on .target, &:hover .target { box-shadow: none; }

  &.on, &:focus-within { .target { border-radius: 0; } }

  .popup {
    background-color: $block-border-color-secondary;
    box-shadow: 0px 4px 4px rgba(52, 58, 63, 0.15);;
    border-radius: 0;
    top: calc(100% + 3px);
  }

  &.left .popup { border-radius: 0; }
  &.top .popup { border-radius: 0; }
  &.left.top .popup { border-radius: 0; }

  &.on, &:focus-within {
    .target { border-radius: 0; }
    &.top .target { border-radius: 0; }
    &.invalid .target:before { border-radius: 0; }
    &.top.invalid .target:before { border-radius: 0; }
  }

  .choice {
    background-color: $background-color-lighter;
    color: $text-color-light;
    transition: none;

    html.is-tabbing &:focus { box-shadow: 0; }

    &:first-child { border-top-right-radius: 0; }
    &:last-child { border-radius: 0; }
    &:hover { background: $background-color-light-2; }
    &::before { background: $border-color; }
  }

  &.invalid .target:before {
    content: url('/images/error--filled.svg');
    background: $status-color-wrong;
    left: 100%;
    top: -1px;
    bottom: -1px;
    padding: auto;
    width: 20px;
    text-align: center;
    border-radius: 0;
  }

  &.done .target:before {
    content: url('/images/checkmark--filled.svg');
    line-height: 1;
    background: $status-color-correct;
    position: absolute;
    left: 100%;
    top: -1px;
    bottom: -1px;
    padding: 4px 0 5px;
    width: 20px;
    text-align: center;
    border-radius: 0;
    line-height: 20px; 
    color: white;
    height: auto;
  }

  &.invalid .target {
    padding-left: 12px;
    margin-right: 20px;
  }

  &.done .target {
    background-color: $background-color-lighter;
    padding-left: 12px;
    margin-right: 20px;
    min-width: 50px; 
    line-height: 20px; 
    padding: 2px 12px;
    color: $text-color-light;
    display: inline-block;
    cursor: pointer;
    position: relative;
    box-shadow: none;
  }
  &.done:hover .target { color: none; }
}

q-block {
  x-blank, x-blank-mc {
    .target {
      background-color: $background-color-white;
    }
    .choice {
      background-color: $background-color-white;
    }

    &.done .target {
      background-color: $background-color-white;
    }
  }
}

x-step {
  code {
    background: none;
    border: none;
    font-family: $plex-mono;
    padding-left: 0;
    padding-right: 0;
  }
  a {
    code {
      color: $link-color-tertiary;
    }
  }
}

pre {
  &.language-md,
  &.language-language-markup {
    font-size: 1rem;
    overflow: initial;
    text-align: center;

    code {
      white-space: pre-wrap;
    }
  }
}

.reveal-banner {
  @include type-style('productive-heading-01');
  background-color: $background-color-light;
  border-radius: initial;
  border-right: 1px solid $border-color-secondary;
  color: $text-color-light;
  padding: $spacing-03 $spacing-07 $spacing-03 $spacing-05;
  top: 52px;
  left: 0px;

  .complete {
    color: $text-active-color;
    font-weight: normal;
    line-height: 1.25rem;

    > span {
      display: inline-block;
      vertical-align: text-bottom;
    }

    > svg {
      display: inline-block;
      fill: $text-active-color;
      margin-left: $spacing-05;
      vertical-align: text-bottom;
      width: 1.125rem;
    }
  }

  [data-reveal="true"] & {
    .complete {
      display: none;
    }
  }

  @include mq($until: medium) {
    top: 90px;
  }
}

.progress-wrapper {
  display: inline-block;
  height: 20px;
  width: 20px;
  position: absolute;
  top: 5px;
  color: currentColor;

  &:hover {
    text-decoration: none;
    background: none;
    color: currentColor;

    + a.c-sidebar__entry {
      color: $link-color-tertiary;
      text-decoration: underline;
    }
  }

  &:visited {
    color: currentColor;
  }

  + span.c-sidebar__entry,
  + a.c-sidebar__entry {
    margin-left: 25px;
    max-width: calc(100% - 35px);
  }

  &.sidebar-row {
    &.on {
      background: none;
      color: initial;
      font-weight: inherit;
      line-height: inherit;
      padding: 0;
      transition: none;

      &::before {
        content: none;
      }

      x-progress {
        color: inherit;
        position: initial;
      }
    }
  }
}

x-progress {
  svg {
    z-index: -1;
    position: relative;
  }

  path.pie {
    color: $background-color-tertiary;
  }
}

x-step {
  word-spacing: normal;
  color: $text-color-light;

  ul, ol {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  ul {
    list-style: initial;
  }

  ol {
    list-style: decimal;
  }

  h3 {
    font-size: 1em;
    font-weight: 600;
    line-height: 1.375rem;
    margin: 2em 0 0.5em;
    text-align: initial;
  }

  h2 {
    border-bottom: none;
    color: $text-color-light;
    font-size: 1.75rem;
    font-weight: normal;
    line-height: 2.25rem;
    margin-top: 2em 0 1rem 0;
    padding-bottom: initial;
  }

  &:first-child h2 {
    margin-top: 2em;
  }

  .CodeMirror {
    pre {
      margin: 0;
    }
  }

  p {
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin: 0 0 1em;
  }

  x-img {
    .wrap {
      height: initial;
    }
  }
}

x-step[goals] {
  input[type="checkbox"] {
    display: initial;
    margin-left: 1rem;
    margin-right: 0.5rem;
  }
}

x-course {
  &.ready {
    .skip-step {
      position: relative;
    }
  }
}

.skip-step {
  padding-bottom: 4rem;
}

footer {
  padding: 4rem 0;
  height: initial;
}

x-bio, x-gloss {
  .target {
    border-radius: 0;
    line-height: initial;
    padding: 0 2px;
    margin: 0 -2px;
    border-bottom: 2px solid $glossary-border-color;
  }

  &.on {
    .target {
      background: $glossary-background-color;
      color: $text-color-black;
      border-bottom: 2px solid transparent;
    }
  }

  &:focus-within {
    &.top {
      .target {
        border-radius: 0;
      }
    }
  }

  .target {
    &:before{
      border-radius: 0;
      background: transparent;
      height: 0.15rem;
    }
  }

  &.on {
    .target {
      &:before{
        background: transparent;
        border-bottom: none;
        left: 0;
        right: 0;
      }
    }
  }
}

// Glossary popup
x-bio, x-gloss {
  &:focus-within,
  &:focus,
  &.on {
    z-index: 1000;
  }


  &.top, &.left {
    .popup {
      border-radius: 0;
    }
  }
  &.left {
    &.top {
      .popup {
        border-radius: 0;
      }
    }
  }
  .popup {
    border-radius: 0;
  }


  &.on, &:focus-within {
    .target {
      border-radius: 0;
    }
  }
  .popup {
    background: $background-color-lighter;
    box-shadow: initial;
    left: -2px;
    border-top: 2px solid $glossary-border-color;
    border-bottom: 2px solid $glossary-border-color;
    max-width: 14rem;
  }

  .popup {
    &:after {
      content: " ";
      bottom: calc(100% + 1px);
      border-radius: 0;
      position: absolute;
      border-width: 0.25rem;
      border-style: solid;
      border-color: transparent transparent $glossary-border-color transparent;
    }

    p, strong {
      font-size: 14px;
      color: $text-color-black;
      line-height: 20px;
    }
  }

  &.top {
    .popup {
      &:after {
        top: calc(100% + 1px);
        transform: rotate(180deg);
      }
    }
  }

  &.left {
    .popup {
      &:after {
        bottom: calc(100% + 1px);
        right: 1rem;
      }
    }
    &.top {
      .popup {
        &:after {
          top: calc(100% + 1px);
          transform: rotate(180deg);
          right: 1rem;
        }
      }
    }
  }
}

.math {
  font-size: 1rem;
}


button.a, label a, ol a, p a, x-step p a, ul a {
  color: $link-color-tertiary;
  background: initial;

    &.c-sidebar__entry {
      color: unset;
    }

    &::before {
      background: initial;
    }

    &:hover, &:focus {
      color: $link-color-tertiary;
      text-decoration: underline;
      background: initial;
      box-shadow: none;
    }

    &::after {
      background: initial;
    }
}