.colors-table {
    .table-header {
        @extend %medium;
        @extend %bold;
        border-bottom: 2px solid $gray-light;
        &:hover {
            background: transparent;
        }
        .row {
            padding-left: 50px;
        }
    }
    .row {
        @include table-flex(stretch, center, flex, row, wrap, center);
        padding: 1rem;
        &:hover {
            .options-column {
                @include transition (opacity .3s linear);
                opacity: 1;
            }
        }
        &.edition,
        &.new-value {
            padding-left: 50px;
        }
        &.hidden {
            display: none;
        }
        &.edition {
            .current-color {
                cursor: pointer;
            }
        }
        .color-column,
        .is-closed-column,
        .options-column {
            @include table-flex-child(1, 100px, 0);
        }
        .color-column {
            max-width: 100px;
            position: relative;
        }
        .status-name {
            @include table-flex-child(6, 300px, 0);
            padding: 0 10px;
        }
        .options-column {
            max-width: 100px;
            opacity: 0;
            text-align: right;
        }
        .is-closed-column {
            max-width: 130px;
            text-align: center;
        }
    }
    .row-edit {
        .options-column {
            opacity: 1;
        }
    }
    .table-main {
        border-bottom: 1px solid $gray-light;
        .row {
            &:hover {
                @include transition (background .2s ease-in);
                background: lighten($green-taiga, 60%);
                cursor: move;
            }
        }
    }
    .current-color {
        background-color: $gray-light;
        border-radius: 2px;
        height: 40px;
        width: 40px;
    }
    .icon {
        @extend %large;
        color: $gray-light;
        margin-right: 1rem;
        &:hover {
            color: $green-taiga;
        }
    }
    .icon-delete {
        &:hover {
            color: $red;
        }
    }
    .icon-check-square {
        @extend %large;
        color: $green-taiga;
    }

}
