.field {
  display: inline-block;

  box-sizing: border-box;
  width: 100%;
  padding: .25rem;

  &.columns {
    &.c1 { width: 12.5% }
    &.c2 { width: 25.0% }
    &.c3 { width: 37.5% }
    &.c4 { width: 50.0% }
    &.c5 { width: 62.5% }
    &.c6 { width: 75.0% }
    &.c7 { width: 87.5% }
    &.c8 { width:  100% }
  }

  label {
    display: block;

    width: 100%;

    font-size: .875rem;
    font-weight: bold;

    > tooltip {
      height: 0.8rem;
    }
  }

  &.validation-error {
    > label, > .title {
      color: #CF0001;
    }
  }

  label, .title {
    &:empty {
      display: none;
    }
  }

  .title {
    display: flex;

    margin: 0 .25rem .5rem;

    &:last-child {
      margin-bottom: 0;
    }

    > tooltip {
      width: auto;
      height: 1.2rem;
    }

    > .collapse-button {
      display: inline-block;

      height: 1.5rem;
      padding: 0 .25rem;

      cursor: pointer;

      border: none;
      background: none;
    }
  }

  &.dropdown.option {
    &::after {
      float: right;

      width: 0;
      height: 0;

      content: "";
      transform: translateY(-200%) translateX(-50%);
      pointer-events: none;

      border-top: 0.5rem solid #777777;
      border-right: 0.5rem solid transparent;
      border-left: 0.5rem solid transparent;
    }

    > select {
      width: 100%;
      margin-bottom: .0625rem;
      padding: .25rem 0;

      border: none;
      border-bottom: .0625rem solid $border-color;
      background: none;

      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;

      &:hover {
        border-bottom: .0625rem solid $main-color;
      }

      &.validation-error {
        color: #CF0001;
        border-bottom: .0625rem solid #CF0001;
        background-color: #FFF6F6;
      }
    }
  }

  &.checkbox.option > .box-wrapper {
    display: inline-block;

    margin-right: .75rem;

    > label {
      position: relative;
      top: -2px;

      display: inline;

      margin-left: .125rem;

      vertical-align: bottom;

      font-weight: normal;
    }
  }

  &.text input, &.textarea textarea, &.markdown .CodeMirror {
    display: block;

    width: 100%;
    margin-bottom: .0625rem;
    padding: .25rem 0;

    border: none;
    border-bottom: .0625rem solid $border-color;
    border-radius: .25rem .25rem 0 0;

    &:hover {
      border-bottom: .0625rem solid $main-color;
    }

    &:focus, &.CodeMirror-focused {
      margin-bottom: 0;

      border-bottom: .125rem solid $main-color;
    }

    &.validation-error {
      color: #CF0001;
      border-bottom: .0625rem solid #CF0001;
    }
  }

  &.markdown .CodeMirror {
    height: auto;

    cursor: text;

    background-color: inherit;

    &, .CodeMirror-scroll {
      min-height: 5rem;
    }

    // Fix resizing on Webkit-based browsers
    @media screen and (-webkit-min-device-pixel-ratio:0) {
      overflow-y: auto;
    }

    pre {
      padding: 0;
    }

    .cm-comment {
      // Make sure code blocks are monospace
      font-family: monospace !important;
    }

    // Improve link coloring
    .cm-link {
      color: #2aa198;

      &.cm-formatting {
        color: #7f8c8d;
      }
    }

    .cm-url {
      color: #337ab7;

      &.cm-formatting {
        color: #7f8c8d;
      }
    }
  }

  &.has-children {
    margin: .25rem;
    padding: .25rem;

    border: .0625rem solid #D6D6D6;
    border-radius: .25rem;

    &:not(:last-of-type) {
      margin-bottom: .75rem;
    }

    > .items > .item.columns, &.columns {
      &.c1 { width: calc(12.5% - .5rem) }
      &.c2 { width: calc(25.0% - .5rem) }
      &.c3 { width: calc(37.5% - .5rem) }
      &.c4 { width: calc(50.0% - .5rem) }
      &.c5 { width: calc(62.5% - .5rem) }
      &.c6 { width: calc(75.0% - .5rem) }
      &.c7 { width: calc(87.5% - .5rem) }
      &.c8 { width: calc( 100% - .5rem) }
    }

    > legend {
      .field {
          > label {
            display: none;
          }
          > select, > input {
            border: .0625rem solid $border-color !important;
            border-radius: .25rem;
          }
      }
    }
  }

  &.tabbed.object {
    > .tabs {
      margin-bottom: 1rem;
      padding: .5rem 1rem;

      border-bottom: 1px solid lightgray;
      background-color: $background-color;

      > .tab-link {
        display: inline;

        box-sizing: border-box;
        padding: .5rem 1rem;

        text-decoration: none !important;

        color: #337ab7 !important;
        border-radius: .25rem .25rem 0 0;

        &:hover:not(.open) {
          cursor: pointer;

          background-color: lighten(lightgray, 7%);
        }

        &.open {
          cursor: default;

          color: black !important;
          border: 1px solid lightgray;
          border-bottom: 1px solid $background-color;

          &:focus {
            outline: 1px dotted lightgray;
          }
        }
      }
    }

    > .has-children {
      margin: .25rem 0 0;
      padding: 0;

      border: none;

      > .title {
        display: none;
      }
    }
  }

  &.type {
    > legend {
      select + input {
        margin-left: .5rem;
        padding: .2rem;

        border: .0625rem solid $border-color;
        border-radius: .25rem;

        &:hover {
          border-bottom: .0625rem solid $main-color;
        }

        &:focus {
          margin-bottom: 0;

          border-bottom: .125rem solid $main-color;
        }
      }
    }

    > .has-children {
      margin: 0;
      padding: 0;

      border: none;

      > .title {
        display: none;
      }
    }
  }

  &.array {
    > .controls {
      margin-bottom: .5rem;

      > .new-item {
        padding: .375rem 1rem;

        text-transform: uppercase;

        border: none;
        background-color: $main-color;

        &:hover {
          background-color: $dark-color;
        }
      }
    }

    > .items {
      > .item {
        display: inline-block;

        > .controls {
          float: left;

          width: 2.5rem;

          transform: translateY(.5rem);

          > .delete-button {
            display: inline-block;

            cursor: pointer;

            border: none;
            background: none;

            > img {
              width: 1rem;
              height: 1rem;
              padding: .25rem;
            }
          }
        }

        > .actualItem {
          display: inline-block;
          float: right;

          width: calc(100% - 2.5rem);

          > .field {
            width: 100%;
          }
        }
      }
    }
  }
}
