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

$field-header: #e7ebef;

.table-items-row {
    padding: 0;
}

.field {
    &-summary {
        padding: 1rem 1.25rem;
        line-height: 2.5rem;
    }

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

    &-edit-button {
        & {
            color: $color-theme-blue;
            line-height: 1rem;
            font-size: 1rem;
            font-weight: normal;
        }

        &:hover {
            color: $color-theme-blue-dark;
        }

        &.active {
            background: $color-theme-blue;
            border-color: $color-theme-blue;
            color: $color-accent-dark;
        }
    }

    &-name {
        @include truncate;
    }

    &-hidden {
        color: $color-border-dark;
    }

    &-hints {
        color: lighten($color-text, 50%);
        font-weight: normal;
        font-size: .95rem;
        margin-left: .3rem;
    }

    &-details {
        & {
            position: relative;
        }

        &::before {
            @include caret-top;
            @include absolute(-.5rem, 5.5rem, auto, auto);
            border-color: transparent transparent $color-border;
            border-width: .6rem;
        }

        &-tab {
            padding: 1rem 1.25rem 1.25rem;
        }

        &-tabs {
            background: $color-border;
            position: relative;
            padding: 1rem 1.25rem;
        }
    }

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