// Licensed under the Apache License, Version 2.0 (the “License”); you may not
// use this file except in compliance with the License. You may obtain a copy of
// the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an “AS IS” BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations under
// the License.

// Markdown text.
.text.html.markdown {
  foreground: $blue-gray-200;
}

// Other markup text.
.source.jsx {
  foreground: $orange-300;
}

.text.html \- \(.source.css, .source.js\) {
  foreground: $orange-300;
}

// Character reference.
.constant.character.entity {
  foreground: $pink-a100;
}

// Tags.
.meta.tag {
  .entity.name.tag {
    foreground: $brown-200;
  }
  .punctuation.definition.tag {
    foreground: $brown-200;
  }
}

// Namespace.
.meta.tag {
  .entity.name.tag.namespace,
  .punctuation.separator.namespace {
    foreground: $orange-300;
  }
}

// Attributes.
.entity.other.attribute-name {
  &.id,
  &.key,
  &.ref {
    foreground: $purple-a100;
  }
}

.entity.other.attribute-name.dangerous {
  foreground: $red-a200;
}

// Builtin attribute.
.meta.attribute.builtin
.entity.other.attribute-name {
  foreground: $cyan-300;
}

// JSX attribute.
.source.jsx {
  .entity.other.attribute-name {
    foreground: $green-300;
  }
  .meta.tag.other.component {
    .entity.other.attribute-name {
      foreground: $cyan-300;
    }
  }
}

// Data attribute.
.meta.attribute.data
.entity.other.attribute-name {
  foreground: $blue-grey-100;
  fontStyle: italic;
}

// CDATA/DOCTYPE/JSX Component tag.
.meta.tag.cdata,
.entity.name.tag.cdata,
.meta.tag.sgml.doctype,
.entity.name.tag.doctype,
.meta.tag.other.component,
.entity.name.tag.component {
  foreground: $purple-a100;

  .punctuation.definition.tag {
    foreground: rgba($purple-a100, .5);
  }
}

// CDATA Text.
.constant.other.inline-data {
  foreground: $pink-a200;
  background: rgba($pink-a200, .1);
}

// Sectioning root element.
.meta.tag.form.sectioning.root,
.meta.tag.sectioning.root {
  .entity.name.tag {
    foreground: $green-300;
  }
  .punctuation.definition.tag {
    foreground: rgba($green-300, .5);
  }
}

// Sectioning element.
.meta.tag.sectioning {
  .entity.name.tag {
    foreground: $deep-purple-200;
  }
  .punctuation.definition.tag {
    foreground: rgba($deep-purple-200, .5);
  }
}
