[data-collapsible] {
    > :first-child {
        cursor: pointer;
        padding: 5px;

        &:hover {
            cursor: pointer;
            outline: 1px solid #ccc;
        }

        &::after {
            content: '-';
            display: inline-block;
            padding-left: 5px;
        }
    }

    &.collapsed {
        > :not(:first-child) {
            display: none;
        }
        > :first-child {
            font-style: italic;
            color: #666;

            &::after {
                content: '+';
            }
        }
    }
}



.DemoBox_head {
  font-size: 14px;
  font-family: monospace;
  padding: 4px 6px;
  background-color: #BDBDBD;
  border-bottom: 1px solid #ccc;
  color: #616161;

  a {
    text-decoration: none;
    color: inherit;
    display: block;
  }
}

.DemoBox_text {
    border: 1px solid #cca;
    background-color: #f0f0f0;

    .CodeMirrorRx {
        margin: 5px;
    }

    .CodeMirror {
        background: transparent;
        height: auto;
    }

    textarea {
        border: none;
        width: 200px;
        height: 200px;
        background: transparent;

        &:focus {
          outline: none;
        }
    }
}

.DemoBox {
  display: flex;

  &-top {
    flex-direction: column;
  }
  &-bottom {
    flex-direction: column-reverse;
  }
  &-left {
    flex-direction: row;
  }
  &-right {
    flex-direction: row-reverse;
  }
  &-top, &-left {
    justify-content: flex-start;
  }
  &-bottom, &-right {
    justify-content: flex-end;
  }
}


.DemoBox_output {
    border: 1px solid #ccc;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;

    .DemoBox-top > & {
      border-bottom: none;
    }
    .DemoBox-bottom > & {
      border-top: none;
    }
    .DemoBox-left > & {
      border-right: none;
    }
    .DemoBox-right > & {
      border-left: none;
    }
}

.DemoBox_error {
    padding: 10px 20px;
    color: #700;
    font-weight: bold;
    background-color: #fdd;
    border: 1px solid #caa;
    margin: 5px;
}