@use 'sass:math';

// Overrides for base
//////////////////////

$max-content-width: 200em;
$drawer-size: 250px;
$drawer-size-desktop-large: 300px;

$content-padding: 20px;

$sidebar-top: 0px;
$sidebar-background: #fff;

$size-tablet: 32em;
$size-desktop: 48em;
$size-desktop-large: 64em;


// Variables used in this theme
//////////////////////

$font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Ubuntu, sans-serif;
$font-family-monospaced: Menlo, Consolas, monospace;
$text-color: #2d3134;
$text-color-subtle: #999999;
$text-color-dark-subtle: #fefefe;
$link-color: #1779ba;
$link-color-hover: #1468a0;

$background: white;
$background-subtle: #fafafa;

$border-color: #d8d8d8;
$border-color-subtle: #e0e0e0;
$border-size: 1px;

$border-radius: 3px;

$background-error: #fed7d8;
$text-color-error: #c60609;

$line-height: 1.6;
$line-height-heading: 1.2;

$font-size: 16px;
$font-size-mobile: 14px;

$font-size-small: .875em;
$font-size-extra-small: .75em;
$font-size-large-heading: 2.25em;
$font-size-large-heading-mobile: 1.72em;
$font-size-code: $font-size-small;
$font-size-small-heading: .875em;
$font-size-example-heading: .875em;

$padding-code-block: 15px $content-padding;
$font-size-code-block: .82em;
$text-color-code-block: white;
$background-code-block: #222222;
$line-height-code-block: 1.4;

$container-padding-mobile: $content-padding;
$container-padding-tablet: 30px;
$container-padding-desktop: 40px;

$container-padding-operation: 60px;

$background-arguments: $background-subtle;

$background-examples: #2d3134;
$text-color-examples: white;

$background-sidebar: $background-subtle;

// Imports
//////////////////////

@import 'custom';
@import 'base';
@import 'syntax-highlighting';

// Custom font

// Custom styles
//////////////////////

@mixin containerPaddingHorizontal() {
  padding-left: $container-padding-mobile;
  padding-right: $container-padding-mobile;
  @media (min-width: $size-tablet) {
    padding-left: $container-padding-tablet;
    padding-right: $container-padding-tablet;
  }

  @media (min-width: $size-sidebar-break) {
    padding-left: $container-padding-desktop;
    padding-right: $container-padding-desktop;
  }
}

@mixin containerPaddingVertical() {
  padding-top: $container-padding-mobile;
  padding-bottom: $container-padding-mobile;
  @media (min-width: $size-tablet) {
    padding-top: $container-padding-tablet;
    padding-bottom: $container-padding-tablet;
  }
  @media (min-width: $size-sidebar-break) {
    padding-top: $container-padding-desktop - math.div($content-padding, 2);
    padding-bottom: $container-padding-desktop - math.div($content-padding, 2);
  }
}

#spectaql {
  font-family: $font-family;
  font-size: $font-size-mobile;
  line-height: $line-height;
  background: $background;
  color: $text-color;

  @media (min-width: $size-tablet) {
    font-size: $font-size;
  }

  a {
    color: $link-color;
    text-decoration: none;

    &:hover {
      color: $link-color-hover;
    }
    &:focus,
    &:active {
      color: $link-color;
    }
  }

  code {
    font-size: $font-size-code;
    font-family: $font-family-monospaced;
  }

  // Code block
  pre {
    color: $text-color-code-block;
    border-radius: $border-radius;
    code {
      background: $background-code-block;
    }
  }

  // Highlighted code block
  pre code,
  pre code.hljs {
    font-size: $font-size-code-block;
    line-height: $line-height-code-block;
    padding: $padding-code-block;
  }

  // Main docs heading
  .doc-heading {
    line-height: $line-height-heading;
    font-size: $font-size-large-heading;
    margin-top: math.div($content-padding, 2);

    @include containerPaddingHorizontal();

    @media (min-width: $size-content-break) {
      // Align with the top of the logo
      margin-top: math.div(-$content-padding, 2);
    }
  }

  // Restrict headings in the left panel to be only 50% wide when the example
  // bar is shown.
  .doc-heading,
  .introduction-item-title,
  .operation-heading,
  .definition-heading {
    @media (min-width: $size-content-break) {
      width: 50%;
    }
  }

  .close-button {
    background: none;
    border: none;
    padding: 5px;
    font-size: 16px;
    font-weight: bold;
    color: $text-color;
  }

  #introduction {
    margin-bottom: $container-padding-operation;

    .introduction-item-title {
      @include containerPaddingHorizontal();
    }

    .example-section {
      margin-bottom: $content-padding;

      h5 {
        font-weight: bold;
      }

      h5,
      p {
        margin: 0;
        font-size: $font-size-small;
      }
    }
  }

  #docs,
  #sidebar,
  #mobile-navbar {
    @include containerPaddingVertical();
  }

  #nav,
  #mobile-navbar,
  .sidebar-top-container {
    @include containerPaddingHorizontal();
  }

  #sidebar {
    // When there is bottom padding, there is a weird scroll behavior when
    // scrolling the main panel to the very bottom
    padding-bottom: 0;
    background: $background-sidebar;

    a {
      color: $text-color;
    }

    a.nav-scroll-active {
      color: $link-color;
    }

    a:hover {
      color: $link-color-hover;
    }

    @media (min-width: $size-sidebar-break) {
      border-right: $border-size solid $border-color;
    }
  }

  #mobile-navbar {
    background: $background;
    margin-top: -$container-padding-mobile;

    @media (min-width: $size-tablet) {
      margin-top: -$container-padding-tablet;
    }

    .sidebar-open-button {
      &::after {
        display: block;
        content: "All Topics";
        margin-left: math.div($content-padding, 2);
      }
    }
  }

  #nav {
    .nav-group {
      margin-top: $content-padding;

      li {
        margin-bottom: math.div($content-padding, 4);
      }
    }

    .nav-group-title {
      font-size: $font-size-small-heading;
      font-weight: normal;
      margin: 0 0 6px 0;
      color: $text-color-subtle;
    }

    .nav-group-section-title {
      font-size: inherit;
      margin: 0;
      margin-bottom: math.div($content-padding, 4);
      font-weight: normal;
    }

    .nav-group-section-items {
      margin-left: .75em;
    }
  }

  #docs {
    padding-left: 0;
    padding-right: 0;

    @media (min-width: $size-content-break) {
      // display the dark sidebar background
      &::before {
        content: "";
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 50%;
        background: $background-examples;
      }
    }
  }

  #content {
    @media (min-width: $size-content-break) {
      // Show over top the dark right panel
      position: relative;
    }
  }

  .operation,
  .definition {
    margin-bottom: $container-padding-operation;

    .operation-heading,
    .definition-heading {
      code {
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
      }
    }
  }

  // Style the subtle heading + border above each query / mutation / type
  .group-heading {
    padding-top: math.div($content-padding, 2);
    padding-bottom: math.div($content-padding, 2);
    margin-bottom: $container-padding-desktop;
    font-weight: normal;

    background: $background-sidebar;
    border-top: 1px solid $border-color-subtle;
    border-bottom: 1px solid $border-color-subtle;

    @include containerPaddingHorizontal();

    @media (min-width: $size-content-break) {
      width: 50%;
    }
  }

  .operation-group-name,
  .definition-group-name {
    border-top: $border-size solid $border-color;
    font-size: inherit;
    font-weight: inherit;

    a {
      font-size: $font-size-extra-small;
      display: inline-block;
      background: $link-color;
      color: white;
      padding: math.div($content-padding, 4) math.div($content-padding, 2);
      &:hover {
        background: $link-color-hover;
      }
    }

    @media (min-width: $size-content-break) {
      width: 50%;
    }
  }

  .doc-row .doc-copy,
  .doc-row .doc-examples,
  .operation-heading,
  .definition-heading {
    @include containerPaddingHorizontal();
  }

  .doc-examples {
    margin-top: $content-padding;
    color: $text-color;

    // The heading above each code example block
    .example-section-is-code {
      h5 {
        text-transform: capitalize;
        font-size: $font-size-example-heading;
        margin: 0 0 5px 0;
        font-weight: normal;
      }
    }

    @media (min-width: $size-content-break) {
      margin-top: 0;
      color: $text-color-examples;

      .example-section-is-code {
        h5 {
          color: $text-color-dark-subtle;
        }
      }
    }
  }

  .doc-copy {
    p {
      margin: 0 0 $content-padding 0;

      &:last-child {
        margin-bottom: 0;
      }
    }

    code {
      padding: 1px 4px;
      border-radius: $border-radius;
      background: $background-subtle;
      border: $border-size solid $border-color-subtle;
    }

    // Fields and arguments tables
    table {
      tr th {
        font-weight: normal;
        border-bottom: $border-size solid $border-color;
      }

      tr td {
        border-bottom: $border-size solid $border-color-subtle;
      }
      tr:last-child td,
      tr.row-has-field-arguments td {
        border-bottom: none;
      }

      tr td,
      tr th {
        padding: math.div($content-padding, 4);
      }

      tr th:first-child,
      tr td:first-child {
        padding-left: 0;
      }

      tr th:last-child,
      tr td:last-child {
        padding-right: 0;
      }
    }

    // Each section within each query / mutation / type. Like description,
    // response, arguments, etc.
    .doc-copy-section {
      margin-bottom: $content-padding * 1.5;

      > h5 {
        margin: 0 0 math.div($content-padding, 4) 0;
        font-size: inherit;
        font-weight: inherit;
        color: $text-color-subtle;
      }
    }

    // Hide these titles
    .operation-description > h5,
    .definition-description > h5,
    .definition-properties > h5 {
      @include visually-hidden();
    }
  }

  // Field arguments for a type's field/resolver
  .field-arguments{
    font-size: $font-size-small;
    background-color: $background-arguments;
    border: $border-size solid $border-color-subtle;
    padding: math.div($content-padding, 2);
    margin-bottom: math.div($content-padding, 4);

    p {
      margin: math.div($content-padding, 2) 0 0 0;
    }

    h5.field-arguments-heading {
      margin: 0;
      padding: 0 0 math.div($content-padding, 2) 0;
      font-weight: inherit;
      color: $text-color-subtle;
    }

    .field-argument{
      border-top: $border-size $border-color-subtle solid;
      padding: math.div($content-padding, 2) 0;

      &:last-child {
        padding-bottom: 0;
      }
    }

    .field-argument-name {
      margin: 0;
      font-size: inherit;
      font-weight: inherit;
    }
  }

  .deprecation-reason {
    word-break: break-word;
    &::before {
      display: inline;
      content: 'Deprecated';
      padding: 2px math.div($content-padding, 4);
      margin-right: math.div($content-padding, 4);

      background: $background-error;
      color: $text-color-error;
      font-weight: bold;
      font-size: $font-size-small;
    }
  }
}