@use 'ngx-tethys/styles/variables.scss';

$expand-size: 12px;

@mixin cellInset {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    display: block;
    content: '';
}

@mixin controlSelected {
    background-color: #a3bffe;
    border-color: variables.$primary;
}

@mixin controlDangerous {
    background-color: #ffabac;
    border-color: variables.$danger;
}

@mixin tableLeftShadow {
    &::before {
        position: absolute;
        top: $expand-size * 2 + 10px;
        bottom: 0;
        left: 0;
        z-index: 2;
        width: 8px;
        background: -webkit-gradient(linear, right, left, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.1)));
        background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
        content: ' ';
        pointer-events: none;
    }
}

@mixin tableRightShadow {
    &::after {
        position: absolute;
        top: $expand-size * 2 + 10px;
        right: 0;
        bottom: 0;
        z-index: 2;
        width: 8px;
        background: -webkit-gradient(linear, left, right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
        background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
        content: ' ';
        pointer-events: none;
    }
}