// Styles that are included only when JavaScript is disabled. These override the
// default styles to make them work better without JS.

@import 'functions';

// Make the in-page table of contents fully open by default, since we can't
// dynamically expand it.
.page-sections li a.section {
  &::after {
    transform: rotate(90deg);
  }

  + ul {
    display: block;
  }
}

@mixin -sequence-css-tabs {
  .code-example {
    ul {
      display: none;
    }

    .ui-tabs-panel {
      position: relative;

      pre::after {
        position: absolute;
        top: 5px;
        right: 5px;
        opacity: 0.5;
      }
    }

    .scss pre::after {
      content: 'SCSS';
    }

    .sass pre::after {
      content: 'Sass';
    }

    .css {
      display: block;

      pre::after {
        content: 'CSS';
      }
    }
  }
}

@media screen and (max-width: sl-px-to-rem(1500.00001px)) {
  body.documentation {
    @include -sequence-css-tabs;
  }
}

@media screen and (max-width: sl-px-to-rem(1000.00001px)) {
  body.guide {
    @include -sequence-css-tabs;
  }
}