//
// Hide Text
//
// @see https://make.wordpress.org/core/2017/10/22/changes-to-the-screen-reader-text-css-class-in-wordpress-4-9/
@mixin screen-reader-text {
  & {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;

    &:focus {
      background-color: #f1f1f1;
      border-radius:    3px;
      box-shadow:       0 0 2px 2px rgba(0, 0, 0, 0.6);
      clip:             auto !important;
      color:            #21759b;
      display:          block;
      font-size:        14px;
      font-size:        0.875rem;
      font-weight:      bold;
      height:           auto;
      left:             5px;
      line-height:      normal;
      padding:          15px 23px 14px;
      text-decoration:  none;
      top:              5px;
      width:            auto;
      z-index:          100000; /* Above WP toolbar. */
    }
  }
}

@mixin unscreen-reader-text {
  & {
    position: static !important;
    height:   auto;
    width:    auto;
    overflow: auto;
  }
}

%screen-reader-text {
  @include screen-reader-text;
}

// Unhide text
%unscreen-reader-text {
  @include unscreen-reader-text;
}