.dark {
  .mutations {
    color: #FFF;

    .sidebar {
      border-right-color: rgb(61, 61, 61);

      .mutations-sidebar-title {
        background-color: #2a2a2a;
        border-bottom-color: rgb(61, 61, 61);
        color: #FFF !important;
      }
    }

    .main {
      table {
        tr {
          color: #CCC;
        }
      }

      .component-name {
        color: #c678dd !important; // TODO
      }

      .GraphqlCodeBlock span.comment {
        color: #CCC;
      }

      .GraphqlCodeBlock span.number {
        color: rgb(93, 176, 215);
      }

      .GraphqlCodeBlock span.variable {
        color: rgb(53, 212, 199);
      }

      .GraphqlCodeBlock span.atom {
        color: rgb(242, 151, 102);
      }

      .GraphqlCodeBlock span.attribute {
        color: #c678dd;
      }

      .GraphqlCodeBlock span.punctuation {
        color: #CCCCCC;
      }

      .GraphqlCodeBlock span.keyword {
        color: rgb(231, 194, 111);
      }

      .GraphqlCodeBlock span.def {
        color: hsl(0, 100%, 75%);
      }

      .GraphqlCodeBlock span.property {
        color: rgb(155, 187, 220);
      }
    }
  }
}

.mutations {
  display: flex;
  flex-direction: row;

  .sidebar {
    flex: none;
    width: 200px;
    border-right: 1px solid #DDD;

    .mutations-sidebar-title {
      font-weight: bold;
      background-color: #FBFBFB;
      border-bottom: 1px solid #CCC;
      line-height: 33px;
      padding-left: 10px;

      // support dev-tools dark theme
      .apollo-client-panel.dark & {
        color: #333333;
      }
    }

    .mutation-list {
      padding: 0 0 0 25px;
      margin: 0;

      .item {
        padding: 10px 10px 0;
        font-size: 12px;
        cursor: pointer;
        transition: .25s;

        &:hover {
          span { color: fade(#333, 60%); }

          // support dev-tools dark theme
          .apollo-client-panel.dark & {
            span { color: fade(#ffffff, 60%); }
          }
        }

        &.active {
          span { color: #22a699; }

          &:hover {
            span { color: fade(#22a699, 60%); }
          }
        }

        &.loading {
          span { color: #AAA; }
        }

        .item-row {
          display: inline-flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;

          span {
            max-width: 95%;
            word-wrap: break-word;
          }

          .error-icon {
            width: 16px;
            height: 16px;
          }
        }

      }
    }
  }

  .main {
    flex: 1;
    overflow-y: auto;
    padding: 20px;

    .toggled-section {
      margin-bottom: 10px;

      &:last-of-type {
        margin: 0;
      }

      table {
        tr {
          font-size: 12px;

          // support dev-tools dark theme
          .apollo-client-panel.dark & {
            color: #dddddd;
          }

          td:first-child {
            font-weight: bold;
            padding: 0 15px 0 5px;
          }

          td:nth-child(2) {
            font-family: monospace;
          }
        }
      }
    }

    .panel-title {
      font-size: 14px;
      margin-bottom: 10px;

      .loading-label {
        font-size: 12px;
        font-family: sans-serif;
        margin-left: 10px;
        color: #AAA;
        opacity: 0;
        transition: .25s;

        &.show {
          opacity: 1;
        }
      }

      .component-name {
        color: #8B2BB9;
        font-weight: normal;
        font-family: monospace;
        margin-left: 10px;
      }

      .show-in-graphiql-link {
        font-size: 10px;
        cursor: pointer;
        font-family: sans-serif;
        margin-left: 10px;
        padding: 2px 5px;
        border-radius: 3px;
        border: 1px solid #CCC;

        &:hover {
          box-shadow: inset 6px 6px 30px #CCC;
        }
      }
    }

    pre {
      border: none;
      font-family: monospace;
      font-size: 12px;
    }

    .loading {
      background: #AAA;
    }

    .graphql-error {
      white-space: pre-wrap;
      font-family: Menlo, Monaco, Consolas, monospace;
    }
  }

  .toggle {
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    display: block;

    .triangle {
      width: 15px;
      display: inline-block;
      transition: 300ms all cubic-bezier(0.175, 0.885, 0.335, 1.05);
      line-height: 15px;
      vertical-align: top;
      text-align: center;

      &.toggled {
        transform: rotate(-90deg);
      }
    }

    .section-label {
      line-height: 15px;
      display: inline-block;
      vertical-align: top;
    }

    &:hover .section-label {
      text-decoration: underline;
    }
  }

  .labeled {
    padding-left: 16px;
  }
}