@import 'json-schema-common';

/* styles for array-schema for array */
$array-marker-font-sz: 13px;
$array-marker-line-height: 1.5;
:host {
  display: block;
}

.param-schema > td {
  border-left: $line-border;
  padding: 0 10px;
}

.derived-schema {
  display: none;
}
.derived-schema.active {
  display: block;
}

json-schema.nested-schema {
  background-color: white;
  padding: 10px 20px;
  position: relative;
  border-radius: $border-radius;

  &:before, &:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    border-style: solid;
    border-color: transparent;
    border-width: 10px 15px 0;
    margin-left: -7.5px;
    border-top-color: $side-menu-active-bg-color;
  }
  &:before {
    left: 10%;
  }

  &:after {
    right: 10%;
  }

  .param:first-of-type > .param-name:before, .param:last-of-type > .param-name:after {
    border-color: white;
  }
}

json-schema[nesteven="true"] {
  background-color: $side-menu-active-bg-color;
  border-radius: $border-radius;

  &:before, &:after {
    border-top-color: white;
  }

  > .params-wrap > .param:first-of-type > .param-name:before, > .params-wrap > .param:last-of-type > .param-name:after {
    border-color: $side-menu-active-bg-color;
  }
}

.param.complex > .param-info {
  border-bottom: 0;
}

.params-wrap {
  border-collapse: collapse;
  width: 100%;
}

.params-wrap.params-array:before, .params-wrap.params-array:after {
  display: block;
  font-weight: $base-font-weight;
  color: $black;
  font-size: $array-marker-font-sz;
  line-height: $array-marker-line-height;
}

.params-wrap.params-array:after {
  content: "]";
}

.params-wrap.params-array:before {
  content: "Array [";
  padding-top: 1em;
}

.params-wrap.params-array {
  padding-left: $bullet-margin;
}

.param-schema.param-array:before {
  bottom: ($array-marker-font-sz * $array-marker-line-height) / 2;
  width: $bullet-margin;
  border-left-style: dashed;
  border-bottom: $lines-width dashed $tree-lines-color;
}

.params-wrap.params-array > .param-wrap:first-of-type > .param > .param-name:after {
  content: "";
  display: block;
  position: absolute;
  left: -$lines-width;
  top: 0;
  border-left: $line-border-erase;
  height: ($param-name-height/2) + $cell-padding;
}

.params-wrap > .param > .param-schema.param-array {
  border-left-color: transparent;
}

.param.discriminator {
  > .param-info {
    padding-bottom: 0;
    border-bottom: 0;
  }

  > .param-name:after {
    display: none;
  }
}

.discriminator-info {
  font-weight: $regular;
  margin-bottom: 10px;
}

.discriminator-wrap > td {
  //border-left: $line-border;
  padding: 0;
  position: relative;

  &:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    border-left: $line-border;
    height: ($param-name-height/2) + $cell-padding + 1;
    z-index: 1;
  }
}

ul {
  text-align: left;
  margin: 0;
  padding: 0;
  display: block;
}

li {
  margin: 0.5em 0.3em 0.2em 0;
  font-family: $headers-font, $headers-font-family;
  font-size: .929em;
  line-height: .929em;
  border: 0;
  color: white;
  padding: 2px 8px 4px 8px;
  border-radius: $border-radius;
  background-color: rgba($black, 0.3);
  display: inline-block;
  cursor: pointer;

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

  &.active {
    background-color: $primary-color;
  }
}