// Mixin to hide an element yet keep it available for screen readers.
@mixin visually-hidden() {
    position: absolute;
    display: block;
    height: 1px;
    width: 1px;
    border: 0;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;

    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);

    // Fix to prevent overflowing children to become focusable
    * {
        overflow: hidden;
    }
}