//
// Diff
// ====
// Used for comparision of records
//
//
// Example Usage
// -------------
//
// <div class="diff">
//   <div class="div-item">
//     <div class="diff-title">
//       ...
//     </div>
//     <div class="diff-result">
//       ...
//     </div>
//   </div>
// </div>
//

//
// Variables
//
$diff-bgcolor: #fff;
$diff-border: #ccc;
$diff-color-remove: #c80c05;
$diff-color-add: #44a512;
$diff-padding: 10px;
$diff-title-bgcolor: #fafafa;

//
// Component
//
.diff {
    background-color: $diff-bgcolor;
    border: 1px solid $diff-border;
    display: table;
}

.diff-item {
    display: table-row;

    + .diff-item {
        border-top: 1px solid $diff-border;
    }
}

.diff-item-title,
.diff-item-result {
    padding: $diff-padding;
    display: table-cell;
}

.diff-item-title {
    background-color: $diff-title-bgcolor;
    padding-right: 10px;
    font-style: italic;
    white-space: nowrap;
}

.diff-item-result {
    font-family: $font-family-monospace;
    width: 100%;
    white-space: pre;
    word-break: break-all;
    word-wrap: break-word;

    del {
        color: $diff-color-remove;
        background-color: lighten($diff-color-remove, 58%);
        text-decoration: none;
    }

    ins {
        color: $diff-color-add;
        background-color: lighten($diff-color-add, 58%);
        text-decoration: none;
    }

    &.diff-item-result-inline {
        white-space: normal;
    }
}
