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

$swift-ease-in-duration: 300ms !default;
$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;

// $non-resizable-hover-divider: mat-color($foreground, divider);
$resizable-hover-divider: variables.$primary;
$resizable-active-divider: variables.$primary;

@mixin no-select {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.the-table-resize-overlay-thumb {
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent;
    cursor: col-resize;
    transition: background $swift-ease-in-duration $swift-ease-in-timing-function;
    @include no-select();

    &:hover {
        &::after {
            position: absolute;
            right: 7px;
            width: 2px;
            height: 100%;
            background-color: variables.$primary;
            content: ' ';
            pointer-events: none;
        }
    }
}

.the-row-resize-handle-panel {
    &.cdk-overlay-pane {
        max-width: inherit;
    }
    .the-table-resize-overlay-thumb {
        cursor: row-resize;
        &:hover {
            &::after {
                position: absolute;
                top: 7px;
                left: 0;
                width: 100%;
                height: 2px;
                background-color: variables.$primary;
                content: ' ';
                pointer-events: none;
            }
        }
    }
}