/*
   *  Edit in place element styles.
   *
   *  - Edit value
   */

@import "compass/css3/inline-block";
@import "compass/css3/transform";

/*
    <div class="input edit_in_place">
      <input type="text" value="" />
      <div class="value  empty">
        <span style="max-width: 120px;">empty</span>
      </div>
    </div>
  */

.edit_in_place {
  .value {
    position: relative;
    z-index: 100;
    margin: 4px 5px 0 0;
    padding: 0 5px 3px;
    transform: skew(-25deg);
    background: rgba(#FFDC73, 0.3);
    color: #666;
    font-size: 15px;

    &:hover {
      background: rgba(#FFDC73, 0.5);
    }

    span {
      display: inline-block;
      max-width: 150px;
      padding: 1px;
      overflow: hidden;

      transform: skew(25deg);
      text-overflow: ellipsis;
      vertical-align: top;
      white-space: nowrap;
    }

    &.empty {
      font-style: italic;
    }
  }

  &.disabled .value {
    background: rgba(gray, 0.1);
    color: #AAA;

    &:hover {
      background: rgba(gray, 0.1);
    }
  }

  input {
    display: none;
    position: relative;
    z-index: 100;
  }
}