$sublevel-margin: 4px;
$row-height: 27px;

$background-color: darken(#F5F5F5, 5%);
$title-background-color: darken(#F5F5F5, 10%);
$text-color: #1a1a1a;
$font-family: 'Helvetica', 'Arial', 'sans-serif';
$font-size: 11px;

$hover-lighten: 5%;
$border-lighten: 7%;
$active-lighten: 10%;

$asset-border-color: $background-color;
$number-color: #2FA1D6;
$integer-color: $text-color;
$integer-border-color: #806787;
$float-color: $text-color;
$float-border-color: $number-color;
$boolean-border-color: $background-color;
$string-border-color: $background-color;
$string-color: $text-color;
$custom-color: #FFFF00;
$type-border-width: 3px;

$border-color: lighten($background-color, $border-lighten);
$title-border-color: rgba(255, 255, 255, 0.2);
$input-color: lighten($background-color, 18.5%);

@mixin transition($prop, $time, $curve) {
  -webkit-transition: $prop $time $curve;
  -o-transition: $prop $time $curve;
  -moz-transition: $prop $time $curve;
  transition: $prop $time $curve;
}

.pgp {
  color: $text-color;
  font-family: $font-family;
  font-size: $font-size;
  background-color: $background-color;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    clear: both;

    li {
      @include transition(height, 0.1s, ease-out);

      &:not(.folder) {
        border-bottom: 1px solid $border-color;
        height: $row-height;
        line-height: $row-height;
        overflow: hidden;
        padding: 0 3px 0 3px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      &.folder {
        border-bottom: 0;
        padding: 0;
        border-left: $sublevel-margin solid rgba(0, 0, 0, 0);
      }

      &.title {
        padding-left: 14px;
        background: $title-background-color url(data:image/gif;base64,R0lGODlhBQAFAPcAAAAAAAAAMwAAZgAAmQAAzAAA/wAzAAAzMwAzZgAzmQAzzAAz/wBmAABmMwBmZgBmmQBmzABm/wCZAACZMwCZZgCZmQCZzACZ/wDMAADMMwDMZgDMmQDMzADM/wD/AAD/MwD/ZgD/mQD/zAD//zMAADMAMzMAZjMAmTMAzDMA/zMzADMzMzMzZjMzmTMzzDMz/zNmADNmMzNmZjNmmTNmzDNm/zOZADOZMzOZZjOZmTOZzDOZ/zPMADPMMzPMZjPMmTPMzDPM/zP/ADP/MzP/ZjP/mTP/zDP//2YAAGYAM2YAZmYAmWYAzGYA/2YzAGYzM2YzZmYzmWYzzGYz/2ZmAGZmM2ZmZmZmmWZmzGZm/2aZAGaZM2aZZmaZmWaZzGaZ/2bMAGbMM2bMZmbMmWbMzGbM/2b/AGb/M2b/Zmb/mWb/zGb//5kAAJkAM5kAZpkAmZkAzJkA/5kzAJkzM5kzZpkzmZkzzJkz/5lmAJlmM5lmZplmmZlmzJlm/5mZAJmZM5mZZpmZmZmZzJmZ/5nMAJnMM5nMZpnMmZnMzJnM/5n/AJn/M5n/Zpn/mZn/zJn//8wAAMwAM8wAZswAmcwAzMwA/8wzAMwzM8wzZswzmcwzzMwz/8xmAMxmM8xmZsxmmcxmzMxm/8yZAMyZM8yZZsyZmcyZzMyZ/8zMAMzMM8zMZszMmczMzMzM/8z/AMz/M8z/Zsz/mcz/zMz///8AAP8AM/8AZv8Amf8AzP8A//8zAP8zM/8zZv8zmf8zzP8z//9mAP9mM/9mZv9mmf9mzP9m//+ZAP+ZM/+ZZv+Zmf+ZzP+Z///MAP/MM//MZv/Mmf/MzP/M////AP//M///Zv//mf//zP////X19QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAANgALAAAAAAFAAUAAAgQALEJHEgQgEGD2A4OBCAwIAA7) 4px 10px no-repeat;
        cursor: pointer;
        border-bottom: 1px solid $title-border-color;
        margin-left: -$sublevel-margin;
      }

      /* Controller row, <li> */
      &.cr {
        clear: both;
        border-left: $type-border-width solid rgba(0, 0, 0, 0);

        &.asset {
          border-left-color: $asset-border-color;
        }

        &.boolean {
          border-left-color: $boolean-border-color;
        }

        &.integer {
          border-left-color: $integer-border-color;
          input[type=text] {
            color: $integer-color;
          }
        }

        &.float {
          border-left-color: $float-border-color;
          input[type=text] {
            color: $float-color;
          }
        }

        &.number {
          border-left-color: $number-color;
          input[type=text] {
            color: $number-color;
          }
        }

        &.string {
          border-left-color: $string-border-color;
          input[type=text] {
            color: $string-color;
          }
        }

        &.custom {
          border-left-color: $custom-color;
        }

        /** Name-half (left) */
        .property-name {
          cursor: default;
          float: left;
          clear: left;
          width: 40%;
          overflow: hidden;
          text-overflow: ellipsis;

          &.p-reset {
            width: 30%;
          }
        }

        div.p-reset {
          width: 10%;
          text-align: right;
          float: left;
          i.reset-badge {
            margin-left: 1px;
            margin-right: 2px;

            &.btn-reset:hover {
              cursor: pointer;
            }
          }
        }


        /** Controllers */
        /** Controller-half (right) */
        .c {
          float: left;
          width: 60%;
          height: $row-height;
          overflow: hidden;
          text-overflow: ellipsis;

          &.has-invalid-value {
            background-color: #f98980;
          }

          /** Controller placement */
          input {
            font-size: 12px;
            height: 19px;
            line-height: 19px;
            box-sizing: border-box;
          }

          input[type=checkbox] {
            margin-top: -2px;
          }

          input[type=text] {
            border: 0;
            margin-top: -2px;
            margin-bottom: 0;
            padding: 3px;
            width: 100%;
            outline: none;
          }

          input[type=number] {
            border: 0;
            margin-top: -2px;
            margin-bottom: 0;
            padding-left: 2px;
            padding-bottom: 0;
            padding-top: 0;
            width: 100%;
            outline: none;
          }

          input[type=text]:not([disabled]) {
            background: $input-color;

            &:hover {
              background: lighten($input-color, $hover-lighten);
            }

            &:focus {
              background: lighten($input-color, $active-lighten);
            }
          }

          div.iCheckBox {
            margin-top: 5px;
          }

          select {
            margin-top: 2px;
            width: 100%;
            height: 23px;
            border: 0;
            padding: 3px;
            color: $text-color;
            font-size: 11px;
          }

          select:not([disabled]) {
            background: $input-color;
          }

          .btn-dialog-open {
            margin-top: 2px;
            position: absolute;
            right: 2px;
            font-weight: bold;
          }

          div.color-picker {
            height: 19px;
            width: 100%;
            margin-top: 4px;
            cursor: pointer;
            border-radius: 4px;
            border-style: solid;
            border-width: 1px;
            border-color: darkgrey;
          }

          div.asset-widget {
            height: 25px;
            line-height: 25px;
            width: 98%;

            .btn-dialog-open {
              top: -1px;
              padding: 0 3px;
            }
          }
        }
      }
    }

    &.closed {
      li:not(.title) {
        display: none;
      }

      li.title {
        background-image: url(data:image/gif;base64,R0lGODlhBQAFAPcAAAAAAAAAMwAAZgAAmQAAzAAA/wAzAAAzMwAzZgAzmQAzzAAz/wBmAABmMwBmZgBmmQBmzABm/wCZAACZMwCZZgCZmQCZzACZ/wDMAADMMwDMZgDMmQDMzADM/wD/AAD/MwD/ZgD/mQD/zAD//zMAADMAMzMAZjMAmTMAzDMA/zMzADMzMzMzZjMzmTMzzDMz/zNmADNmMzNmZjNmmTNmzDNm/zOZADOZMzOZZjOZmTOZzDOZ/zPMADPMMzPMZjPMmTPMzDPM/zP/ADP/MzP/ZjP/mTP/zDP//2YAAGYAM2YAZmYAmWYAzGYA/2YzAGYzM2YzZmYzmWYzzGYz/2ZmAGZmM2ZmZmZmmWZmzGZm/2aZAGaZM2aZZmaZmWaZzGaZ/2bMAGbMM2bMZmbMmWbMzGbM/2b/AGb/M2b/Zmb/mWb/zGb//5kAAJkAM5kAZpkAmZkAzJkA/5kzAJkzM5kzZpkzmZkzzJkz/5lmAJlmM5lmZplmmZlmzJlm/5mZAJmZM5mZZpmZmZmZzJmZ/5nMAJnMM5nMZpnMmZnMzJnM/5n/AJn/M5n/Zpn/mZn/zJn//8wAAMwAM8wAZswAmcwAzMwA/8wzAMwzM8wzZswzmcwzzMwz/8xmAMxmM8xmZsxmmcxmzMxm/8yZAMyZM8yZZsyZmcyZzMyZ/8zMAMzMM8zMZszMmczMzMzM/8z/AMz/M8z/Zsz/mcz/zMz///8AAP8AM/8AZv8Amf8AzP8A//8zAP8zM/8zZv8zmf8zzP8z//9mAP9mM/9mZv9mmf9mzP9m//+ZAP+ZM/+ZZv+Zmf+ZzP+Z///MAP/MM//MZv/Mmf/MzP/M////AP//M///Zv//mf//zP////X19QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAANgALAAAAAAFAAUAAAgQALFhAyBQIACCBg8mLIgwIAA7);
      }
    }
  }
}