@use 'true' as test;
@use '../accessibility';

@include test.describe('hide-text mixin') {
    @include test.it('should output styles to visually hide text') {
        @include test.assert() {
            @include test.output() {
                .text-hidden {
                    @include accessibility.hide-text();
                }
            }

            @include test.expect() {
                .text-hidden {
                    position: absolute;
                    width: 1px;
                    height: 1px;
                    padding: 0;
                    margin: -1px;
                    overflow: hidden;
                    clip: rect(0, 0, 0, 0);
                    white-space: nowrap;
                    border: 0;
                }
            }
        }
    }
}

@include test.describe('min-tap-target mixin') {
    @include test.it('should output styles for default centered tap target') {
        @include test.assert() {
            @include test.output() {
                .tap-target-centered {
                    @include accessibility.min-tap-target(40px);
                }
            }

            @include test.expect() {
                .tap-target-centered {
                    position: relative;
                }

                // stylelint-disable order/properties-order -- Disabling rule due to conditional rendering affecting property order
                .tap-target-centered::before {
                    content: '';
                    position: absolute;
                    width: 40px;
                    height: 40px;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
                // stylelint-enable order/properties-order
            }
        }
    }

    @include test.it('should output styles for non-centered tap target') {
        @include test.assert() {
            @include test.output() {
                .tap-target-non-centered {
                    @include accessibility.min-tap-target(40px, false);
                }
            }

            @include test.expect() {
                .tap-target-non-centered {
                    position: relative;
                }

                .tap-target-non-centered::before {
                    content: '';
                    position: absolute;
                    width: 40px;
                    height: 40px;
                }
            }
        }
    }
}
