@use "sass:list";

// Variables for consistent theme
$neutral-10: #f0f1f1;
$neutral-20: #e4e6e6;
$neutral-30: #d2d6d7;
$neutral-40: #b7bcbf;
$neutral-50: #8c969a;
$neutral-60: #6b757a;
$neutral-80: #545d61;
$neutral-85: #434b4f;
$neutral-95: #2a2e30;
$neutral-98: #1c2022;
$neutral-100: #080a0b;

$success-30: #4ac966;
$error-30: #ff5f5f;

$authorize-button: #3ece90;
$link: #51a8ff;
$markdown-code: #b68ae1;
$textarea: #0d1014;
$textarea-disabled: #202225;
$info-version-stamp: #1d632e;
$curl-command-button: #3b424d;
$curl-command-button-text: #ebebeb;
$json-schema-2020-12__attribute--primary: #9898ff;
$json-schema-2020-12__constraint--string: #d4aa53;

$opblock_colors: (
  post: (
    #112929,
    #104834,
    #14392c,
    #00b572,
  ),
  deprecated: (
    #272c34,
    #495361,
    #262e36,
    #6a6a6a,
  ),
  put: (
    #27201e,
    #523524,
    #9a5b3e,
    #ff7d35,
  ),
  get: (
    #182536,
    #294262,
    #1c3043,
    #55a1ff,
  ),
  delete: (
    #241a20,
    #4b2420,
    #2f2020,
    #eb6156,
  ),
  patch: (
    #11282f,
    #16494b,
    #113239,
    #03b7bf,
  ),
  head: (
    #282231,
    #44336a,
    #352c45,
    #b889ff,
  ),
  options: (
    #202c3c,
    #33465e,
    #314558,
    #6895c8,
  ),
  query: (
    #2a1a28,
    #4a2848,
    #3a2238,
    #d977c6,
  ),
);

html.dark-mode {
  background: $neutral-98;

  .swagger-ui {
    color: $neutral-20;
    background: $neutral-98;

    .authorization__btn svg,
    .expand-operation svg,
    .opblock-control-arrow svg {
      fill: $neutral-40;
      opacity: 1;
    }

    section h3 {
      color: $neutral-20;
    }

    table thead tr {
      td,
      th {
        color: $neutral-20;
      }
    }

    .markdown,
    .renderedMarkdown {
      p,
      pre {
        color: $neutral-20;
      }

      code {
        background: $neutral-100;
        color: $markdown-code;
      }
    }

    // ------ INPUT / TEXTAREA / SELECT ------

    input {
      background: $neutral-98;
      border-color: $neutral-40;
      color: $neutral-10;

      &:focus:not(.download-url-input) {
        border-color: $link !important;
        box-shadow: none;
        outline: none;
      }
    }

    textarea {
      background: $textarea;
      border: 1px solid $textarea;
      color: $neutral-10;

      &:focus {
        border-color: $link;
      }

      &[disabled] {
        background-color: $textarea-disabled;
        border-color: $textarea-disabled;
        color: $neutral-50;
      }
    }

    select {
      background: $neutral-98
        url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#B7BCBF" d="M13.418 7.859c.271-.268.709-.268.978 0 .27.268.272.701 0 .969l-3.908 3.83c-.27.268-.707.268-.979 0l-3.908-3.83c-.27-.267-.27-.701 0-.969.271-.268.709-.268.978 0L10 11l3.418-3.141z"/></svg>')
        right 10px center no-repeat;
      color: $neutral-10;
      border-color: $neutral-40;
      box-shadow: none;
      outline: none;

      &[multiple] {
        background: $neutral-98;
      }

      &:focus {
        border-color: $link;
      }
    }

    input::placeholder,
    textarea::placeholder {
      color: $neutral-10;
      opacity: 0.5;
    }

    input.invalid,
    select.invalid,
    textarea.invalid {
      background: $neutral-98;
      border-color: $error-30;
    }

    // ------ TOPBAR ------

    .topbar {
      background: $neutral-95;

      .download-url-wrapper {
        .download-url-button {
          color: $neutral-20;
          background: $info-version-stamp;
        }

        .download-url-input {
          border-color: $info-version-stamp;

          &.failed {
            color: $error-30;
          }
        }
      }
    }

    // ------ MODAL ------

    .dialog-ux {
      .modal-ux {
        background-color: $neutral-95;
        color: $neutral-20;
        border: none;

        &-header {
          border-color: $neutral-80;

          .close-modal svg {
            fill: $neutral-20;
          }
        }

        h2,
        h3,
        h4,
        h5,
        p,
        label {
          color: $neutral-20;
        }

        .scopes a {
          color: $link;
        }

        .btn.modal-btn {
          border-color: $authorize-button;
          color: $authorize-button;
        }

        .btn.modal-btn.btn-done {
          color: $neutral-20;
          border-color: $neutral-20;
        }

        .auth-container {
          border-color: $neutral-80;
        }

        .checkbox {
          input[type="checkbox"] {
            & + label > .item {
              background: $neutral-80;
              color: $neutral-10 !important;
              box-shadow: none;
            }

            &:checked + label > .item {
              background: $neutral-80
                url('data:image/svg+xml, <svg width="10px" height="8px" viewBox="3 7 10 8" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon id="Rectangle-34" stroke="none" fill="#E4E6E6" fill-rule="evenodd" points="6.33333333 15 3 11.6666667 4.33333333 10.3333333 6.33333333 12.3333333 11.6666667 7 13 8.33333333"></polygon></svg>')
                center center no-repeat;
            }
          }
        }
      }
    }

    // ------ LOADING SPINNER ------

    .loading-container .loading {
      &::before {
        border-color: $neutral-80;
        border-top-color: $neutral-20;
      }

      &::after {
        color: $neutral-20;
      }
    }

    // ------ SCHEMES / SERVERS ------

    .scheme-container {
      background: $neutral-98;
      box-shadow: 0 1px 2px 0 $neutral-80;

      .schemes > .schemes-server-container > label {
        color: $neutral-20;
      }

      .btn.authorize {
        border-color: $authorize-button;
        color: $authorize-button;

        svg {
          fill: $authorize-button;
        }
      }
    }

    // ------ INFO ------

    .info {
      h1,
      h2,
      h3,
      h4,
      h5,
      .title {
        color: $neutral-30;
      }

      li,
      p,
      table,
      .base-url {
        color: $neutral-20;
      }

      a {
        color: $link;
      }

      .title small {
        background: $neutral-85;

        &.version-stamp {
          background: $info-version-stamp;
        }
      }

      .errors-wrapper {
        background: $neutral-85;
        border-color: $error-30;

        h4,
        span {
          color: $neutral-20;
        }

        .btn.errors__clear-btn {
          color: $neutral-20;
          border-color: $neutral-20;
        }
      }
    }

    // ------ COPY / DOWNLOAD BUTTONS ------

    .copy-to-clipboard,
    .download-contents {
      background: $neutral-80;
      color: $neutral-20;

      button {
        background: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='15' aria-hidden='true'><g transform='translate(2, -1)'><path fill='#E4E6E6' fill-rule='evenodd' d='M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z'></path></g></svg>")
          center center no-repeat;
      }
    }

    // ------ TAG ------

    .opblock-tag {
      border-bottom-color: $neutral-80;
      color: $neutral-20;

      small {
        color: $neutral-20;
      }

      a.link {
        color: $link;
      }
    }

    // ------ OPERATION ------

    .opblock {
      @each $type, $colors in $opblock_colors {
        &.opblock-#{$type} {
          background: list.nth($colors, 1);
          border-color: list.nth($colors, 2);

          thead {
            tr {
              th,
              td {
                border-color: list.nth($colors, 2);
                opacity: 1;
              }
            }
          }

          .opblock-section-header {
            background: list.nth($colors, 3);
            border-top: 1px solid list.nth($colors, 2);
            border-bottom: 1px solid list.nth($colors, 2);

            .tab-header .tab-item .opblock-title span::after {
              background: list.nth($colors, 4);
            }
          }

          .opblock-summary {
            border-bottom: none;
            border-color: list.nth($colors, 2);

            &-control {
              &:focus {
                outline: none;
              }
            }

            &-method {
              background: list.nth($colors, 4);
              color: $neutral-100;
              text-shadow: none;
            }
          }

          .opblock-body > .opblock-description-wrapper,
          .opblock-body > .opblock-title_normal {
            border-top: 1px solid list.nth($colors, 2);
          }
        }
      }

      .opblock-section-header {
        box-shadow: none;

        h4 {
          color: $neutral-20;
        }

        label {
          color: $neutral-20;
        }

        .try-out__btn {
          color: $neutral-20;
          border-color: $neutral-40;
          box-shadow: none;

          &.cancel {
            color: $error-30;
            border-color: $error-30;
          }
        }
      }

      .btn.json-schema-form-item-add,
      .btn.json-schema-form-item-remove {
        color: $neutral-20;
        border-color: $neutral-20;
      }

      .validation-errors.errors-wrapper {
        background: $neutral-85;
        border-color: $error-30;
        color: $neutral-20;
      }

      .body-param-options label span {
        color: $neutral-20;
      }

      .opblock-summary-operation-id,
      .opblock-summary-path,
      .opblock-summary-path__deprecated,
      .opblock-summary-description,
      .opblock-description-wrapper p,
      .opblock-description-wrapper i,
      .opblock-external-docs-wrapper,
      .opblock-title_normal,
      .parameter__name,
      .parameter__type,
      .parameter__type .prop-format,
      .parameter__in,
      .response-col_status,
      .response-col_undocumented,
      .response-col_links {
        color: $neutral-20;
      }

      .opblock-external-docs a.link {
        color: $link;
      }

      .parameter__name.required {
        span {
          color: $error-30;
        }

        &:after {
          color: $error-30;
        }
      }

      .parameter__empty_value_toggle {
        color: $neutral-20;
      }

      .btn.execute {
        background: $link;
        border-color: $link;
        color: $neutral-100;
      }

      .btn.btn-clear {
        color: $neutral-20;
        border-color: $neutral-20;
      }

      .highlight-code pre.microlight {
        background: $neutral-95 !important;
        color: $neutral-10;
      }

      .curl-command .btn {
        background: $curl-command-button !important;
        border-color: $neutral-95 !important;
        color: $curl-command-button-text !important;

        &.active {
          background: $neutral-95 !important;
          color: $neutral-20 !important;
        }
      }

      pre.microlight {
        background: $neutral-95 !important;
        color: $neutral-10;
      }

      .model-example {
        .tab button {
          color: $neutral-20;
        }

        .tabitem::after {
          background: $neutral-60;
        }
      }

      .responses-inner {
        h4,
        h5 {
          color: $neutral-20;
        }
      }

      .response-control-media-type--accept-controller {
        select.content-type {
          border-color: $success-30;
        }

        .response-control-media-type__accept-message {
          color: $success-30;
        }
      }
    }

    // ------ MODEL ------

    .model {
      &-toggle {
        &:after {
          background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#e4e6e6" d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>')
            center no-repeat;
          background-size: 100%;
        }
      }

      .prop-type {
        color: $markdown-code;
      }

      .property-row,
      .brace-open,
      .brace-close,
      .prop-format,
      .property,
      .description {
        color: $neutral-20;
      }

      .property-row.required .star {
        color: $error-30;
      }
    }

    .model-box {
      background: $neutral-95;

      .model-title,
      .model {
        color: $neutral-20;
      }

      &-control {
        &:focus {
          outline: none;
        }

        &:not(.prop) {
          color: $neutral-20;
        }
      }
    }

    // ------ JSON SCHEMA 2020-12 ------

    .json-schema-2020-12 {
      background: $neutral-95;

      button {
        background: $neutral-95;

        svg {
          fill: $neutral-20;
        }
      }

      a {
        color: $link;
      }

      &__title {
        color: $neutral-20;
      }

      &-property--required
        > .json-schema-2020-12:first-of-type
        > .json-schema-2020-12-head
        .json-schema-2020-12__title::after {
        color: $error-30;
      }

      &-expand-deep-button {
        color: $neutral-40;
      }

      &-body {
        border-color: $neutral-40;
      }

      &-keyword {
        &__name {
          &--primary {
            color: $neutral-20;
          }

          &--secondary {
            color: $neutral-40;
          }
        }

        &__value {
          &--secondary {
            color: $neutral-40;
          }

          &--warning {
            color: $error-30;
            border-color: $error-30;
          }
        }

        &--\$vocabulary {
          ul {
            border-color: $neutral-40;
          }
        }

        &--patternProperties {
          .json-schema-2020-12__title::before,
          .json-schema-2020-12__title::after {
            color: $json-schema-2020-12__attribute--primary;
          }
        }
      }

      &__attribute {
        &--primary {
          color: $json-schema-2020-12__attribute--primary;
        }

        &--muted {
          color: $neutral-40;
        }

        &--warning {
          color: $error-30;
        }
      }

      &-json-viewer {
        &__name--secondary,
        &__value--secondary {
          color: $neutral-40;
        }
      }

      &__constraint {
        color: $neutral-100;
        background: $json-schema-2020-12__attribute--primary;

        &--string {
          background: $json-schema-2020-12__constraint--string;
        }
      }
    }

    // ------ MODELS ------

    section.models {
      border-color: $neutral-80;

      h4 {
        border-color: $neutral-80;
      }

      h4 span {
        color: $neutral-20;
      }

      .model-container {
        background: $neutral-95;
      }

      .models-control {
        &:focus {
          outline: none;
        }

        svg {
          fill: $neutral-40;
        }
      }
    }
  }
}
