@use 'px' as *;
@use 'true' as *;

@include test-module('utils.misc') {
    @include test('mixin no-select') {
        @include assert {
            // test
            @include output {
                @include no-select;
            }
            // output
            @include expect {
                -webkit-touch-callout: none;
                user-select: none;
            }
        }
    }
    @include test('control-reset') {
        @include assert {
            // test
            @include output {
                @include control-reset;
            }
            // output
            @include expect {
                appearance: none;
                border: none;
                outline: none;
                &:focus {
                    border: none;
                    outline: none;
                }
            }
        }
    }

    @include test('placeholder') {
        @include assert {
            // test
            @include output {
                @include placeholder {
                    color: blue;
                    font-family: 'Open-Sans';
                }
            }
            // output
            @include expect {
                &::placeholder {
                    color: blue;
                    font-family: 'Open-Sans';
                }
                &::-webkit-input-placeholder {
                    color: blue;
                    font-family: 'Open-Sans';
                }
                &:-moz-placeholder {
                    color: blue;
                    font-family: 'Open-Sans';
                }
                &::-moz-placeholder {
                    color: blue;
                    font-family: 'Open-Sans';
                }
                &:-ms-input-placeholder {
                    color: blue;
                    font-family: 'Open-Sans';
                }
            }
        }
    }
    @include test('line-clamp') {
        @include assert {
            // test
            @include output {
                @include line-clamp(3);
            }
            // output
            @include expect {
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }
    }
    @include test('before') {
        @include assert {
            // test
            @include output {
                @include before('hello, world');
            }
            // output
            @include expect {
                &:before {
                    content: '';
                    display: block;
                }
            }
        }
    }
    @include test('after') {
        @include assert {
            // test
            @include output {
                @include after('hello, world');
            }
            // output
            @include expect {
                &:after {
                    content: '';
                    display: block;
                }
            }
        }
    }
    @include test('triangle') {
        @include assert {
            // test
            @include output {
                @include triangle('up', 'red', 10px, 2px);
            }
            // output
            @include expect {
                border-style: solid;
                height: 0;
                width: 0;
                border-color: transparent transparent 'red' transparent;
                border-width: 0 1px 10px 1px;
            }
        }
    }

    @include test('debug-zebra') {
        @include assert {
            // test
            @include output {
                @include debug-zebra();
            }
            // output
            @include expect {
                background-image: repeating-linear-gradient(
                    -45deg,
                    yellowgreen 0 20px,
                    gold 20px 40px
                );
            }
        }
    }
}