@import 'commons';

$m-sortable-line-height: 3px;
$m-sortable-dot-height: 9px;

:root {
    --m-sortable-color: #{$m-color-success};
}

@mixin m-sortable-line() {
    &:not(.m--cant-sort):not(.m--is-sortable-placeholder) {

        &.m--is-sortbefore,
        &.m--is-sortafter {
            &::after {
                content: '';
                position: absolute;
                left: 0;
                width: 100%;
                height: $m-sortable-line-height;
                background-color: var(--m-sortable-color);
                z-index: 100;
            }
        }

        &.m--is-sortbefore::after {
            top: -#{$m-sortable-line-height / 2};
        }

        &.m--is-sortafter::after {
            bottom: -#{$m-sortable-line-height / 2};
        }
    }
}

@mixin m-sortable-dot() {
    &:not(.m--cant-sort):not(.m--is-sortable-placeholder) {

        &.m--is-sortbefore,
        &.m--is-sortafter {
            &::before {
                content: '';
                position: absolute;
                background-color: var(--m-sortable-color);
                z-index: 100;
                left: -#{$m-sortable-dot-height / 2};
                width: $m-sortable-dot-height;
                height: $m-sortable-dot-height;
                border-radius: 50%;
            }
        }

        &.m--is-sortbefore::before {
            top: -#{$m-sortable-dot-height / 2};
        }

        &.m--is-sortafter::before {
            bottom: -#{$m-sortable-dot-height / 2};
        }
    }
}

@mixin m-sortable() {
    position: relative;

    @include m-sortable-line;
    @include m-sortable-dot;
}