@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;
}

:host.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;
  }
}

:host[nestodd="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;
  }

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

zippy {
  overflow: visible;
}

.zippy-content-wrap {
  padding: 0;
}

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

.param.complex > .param-name .param-name-wrap {
  font-weight: bold;
  cursor: pointer;
  color: $black;
}

.param.complex > .param-name svg {
  height: 1.2em;
  width: 1.2em;
  vertical-align: middle;
  transition: all 0.3s ease;
}

.param.complex.expanded > .param-name svg{
  transform: rotateZ(-180deg);
}

.param.additional > .param-name {
  color: rgba($black, 0.4);
}

.params-wrap {
  width: 100%;
}

table {
  border-spacing: 0;
}

.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: "]";
  font-family: monospace;
}

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

.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;
}

.discriminator-info {
  margin-top: 5px;
}

.discriminator-wrap:not(.empty) > 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, li {
  margin: 0;
}

ul {
  list-style: none;
  padding-left: 1em;
}

li:before {
  content: "- ";
  font-weight: bold;
}

.array-tuple > .tuple-item {
  margin-top: 1.5em;
  display: flex;

  > span {
    flex: 0;
    padding: 10px 15px 10px 0;
    font-family: monospace;
  }

  > json-schema {
    flex: 1;
    &:before, &:after {
      display: none;
    }
  }
}

.param-name-enumvalue {
  padding: 2px;
  background-color: #e6ebf6;

  &:before {
    content: " = ";
  }
}