.module__table {
    width: 100%;
    margin: 0;

    background-color: transparent;
    border-collapse: collapse;
}

.module__row {
    background-color: transparent !important;
    border-bottom: 2px solid color($gray, lighter, .5) !important;

    &.-is-disabled {
        background-color: color($red, lightest) !important;
        border-color: darken(color($red, lightest), 2%) !important;
    }

    &.gu-mirror {
        background-color: color($blue, lightest) !important;
        border-color: color($blue, lighter) !important;
    }

    .gu-transit & {
        background: transparent !important;
    }
}

.module__column {
    padding: .5em;

    &.-stretch {
        width: 100%;
    }

    &.-tight {
        width: 1%;

        white-space: nowrap;
    }

    &.-no-wrap {
        white-space: nowrap;
    }
}

.module__column--drag {
    padding: .5em;
    vertical-align: middle;

    text-align: center;
}

.module__column--drag__icon {
    color: color($gray, light);

    cursor: grab;

    .gu-mirror &,
    &:hover {
        color: color($blue, light);
    }

    &:before {
        /*provide more 'grab' area */
        padding: 1em .5em;
    }

    &.-is-disabled {
        visibility: hidden;
    }
}

.module__column--thumb {
    width: module(thumb-width);
    padding: .5em 0;
    vertical-align: middle;
}

.module__column--editor {
    width: 100%;
    padding: 0 .5em;
    vertical-align: middle;

    &.-active {
        padding: 0 2em 0 1em;

        fieldset,
        legend,
        .module {
            background-color: darken($white-off, 3%);
        }

        .module__column--editor__close {
            position: sticky;
            top: 0;
            right: 0;
            margin-right: -1em;
            padding-top: .5em;

            text-align: right;
        }
    }
}

.module__column--actions {
    width: 1%;
    padding: 0 1em;
    vertical-align: middle;

    text-align: right;
    white-space: nowrap;
}

.module__column__icon {
    display: inline-block;
    width: 1em;

    color: color($gray, default, .5);
    border: 0;

    &.-delete {
        &:hover {
            color: color($red);
        }
    }

    &.-restore {
        color: color($red, light);

        &:hover {
            color: color($red);
        }
    }

    &:hover,
    &:focus {
        color: color($gray, dark, .5);
        outline: 0;
    }
}