@if $enable-visibility {
    .hidden {
        display: none;
    }
    
    @each $name, $breakpoint in $breakpoints {
        @media (min-width: $breakpoint) {
            .hidden-#{$name} {
                display: none;
            }
        }
    }
    
    .hidden-visually {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        border: 0;
        padding: 0;
        clip: rect(0 0 0 0);
        -webkit-clip-path: inset(100%);
        clip-path: inset(100%);
        overflow: hidden;
    }
    
    @each $name, $breakpoint in $breakpoints {
        @media (min-width: $breakpoint) {
            .hidden-visually-#{$name} {
                position: absolute;
                width: 1px;
                height: 1px;
                margin: -1px;
                border: 0;
                padding: 0;
                clip: rect(0 0 0 0);
                -webkit-clip-path: inset(100%);
                clip-path: inset(100%);
                overflow: hidden;
            }
        }
    }
}