/*
 * Copyright (C) 2012 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

//  example markup:
//  <div class="hover-container">
//    these links will be invisible (half transparent if on a touch device),
//    half-transparent when you hover the container, and opaque when hovered.
//    <span>
//      <a class="hide-till-hover"><i class="icon-edit standalone-icon"></a>
//      <a class="hide-till-hover"><i class="icon-delete standalone-icon"></a>
//    <span>
//  </div>

$dimmedOpacity: 0.6;
@if $use_high_contrast { $dimmedOpacity: 0.9; }

.hide-till-hover {
  opacity: 0;

  .touch &,
  .hover-container:hover &,
  .hover-container:focus & {
    opacity: $dimmedOpacity;
  }

  &:focus, &:hover {
    opacity: 1 !important; // the !important part is to win specificity with the rule above this
  }
}



//  Example markup:
//  <a class="dim-till-hover">
//    this will be 50% transparent until hovered over, regardless of .touch or .no-touch
//  </a>
.dim-till-hover {
  opacity: $dimmedOpacity;
  &:hover, &:focus { opacity: 1 }
}

@mixin screenreader-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  transform: translatez(0);
}

// Completely hide, but make available to screenreader so it can read it.
.screenreader-only {
  @include screenreader-only
}

// Completely hide, but make available to screenreader so it can read it.  Used for external tools
.screenreader-only-tool {
  @extend .screenreader-only;
  margin-top: 0px;
  position: relative;
  clip-path: inset(50%);
  -webkit-clip-path: inset(50%);
}
