////
/// Accessibility styles.
///
/// @group  Utilities
/// @author Sky Shabatura <theme@sky.camp>
/// @link   https://taproot-theme.com
////

// Text only shown to screen readers.

.screen-reader-text, .visuallyhidden {
    clip:      rect( 1px, 1px, 1px, 1px );
    clip-path: inset( 50% );
    position:  absolute;
    width:     1px;
    height:    1px;
    margin:    -1px;
    overflow:  hidden;
    padding:   0;
    word-wrap: normal;
    border:    none;

    &:active,
    &:focus {
        clip:            auto;
        clip-path:       none;
        display:         block;
        height:          auto;
        width:           auto;
        z-index:         100000;
        text-decoration: none;
    }
}


// Skip Link
.app-header .skip-link {
    transform: translateY(-100%);
    transition: transform 0.4s ease-in-out;

    &:focus {
        position: fixed!important;
        background-color: #ffffff;
        clip: auto !important;
        display: block;
        padding: 1em;
        border-radius: 0;
        text-align: center;
        outline: none;
        box-shadow: none;
        text-decoration: none;
        top: 0;
        left: 0;
        transform: translateY(0px);
        width: 100%;
        z-index: 100000;
    }
}

.admin-bar .app-header:not(.app-header--fixed) .skip-link:focus {

    @media (max-width: 782px) {
        transform: translateY(46px);
    }

    @media (min-width: 783px) {
        transform: translateY(32px);
    }
}
