@import '_vars';
@import '_mixins';

$field-header: #e7ebef;
$field-line: #c7cfd7;

$padding: 1rem;

.table-items-row-details {
    & {
        cursor: default;
    }

    &::before {
        right: 4.8rem;
    }
}

.table-items-row-summary {
    position: relative;
    padding-right: 1.25rem;
    padding-left: 3rem;
}

.drag-container {
    @include absolute(1.6rem, auto, auto, .75rem);
    line-height: 1px;
}

.col {
    &-tags,
    &-options {
        white-space: nowrap;
    }

    &-options {
        max-width: 140px;
    }
}

.nested-fields {
    padding: $padding;
    padding-left: 2 * $padding;
    position: relative;
    border: 1px solid $color-border;
    border-top-width: 0;
    background: $color-table-footer;
}

.nested-field {
    & {
        position: relative;
    }

    &-add {
        border: 2px dashed $field-line;
        position: relative;
        padding: 1rem;
    }

    &-line-v {
        @include absolute($padding, auto, 3 * $padding + .25rem, $padding);
        border: 0;
        border-left: 2px dashed $field-line;
        width: 2px;
    }

    &-line-h {
        @include absolute(-2px, auto, 50%, -$padding);
        border: 0;
        border-bottom: 2px dashed $field-line;
        width: $padding - .25rem;
    }
}

.field {
    & {
        position: relative;
    }

    &-icon {
        margin-right: 1rem;
        color: $color-border-dark;
        font-size: 1.2rem;
        font-weight: normal;
        vertical-align: middle;
    }

    &-name {
        @include truncate;
    }

    &-hidden {
        color: $color-text-decent;
    }

    &-partitioning {
        color: $color-text-decent;
        font-weight: normal;
        font-size: .85rem;
    }

    .tag {
        @include opacity(.9);
        min-width: 4rem;
        max-width: 6rem;
    }
}