18F/calc

@import '_uswds_variables';
@import 'variables';

// link styles
@mixin link ($link, $visit, $hover, $active) {
  a {
    color: $link;

    &:visited {
      color: $visit;
    }

    &:hover {
      color: $hover;
    }

    &:active {
      color: $active;
    }
  }
}

@mixin focus-color ($bg-color: "light-color", $spacing: 2px, $style: dotted) {
  // Use $color-gray-darker for links which run over light colors (e.g. white, or green in footer)
  // Use $color-gray-light for links which run over dark colors (e.g. header)
  @if $bg-color == "light-color" {
    outline: $spacing $style $color-gray-darker;
  }
  @if $bg-color == "dark-color" {
    outline: $spacing $style $color-gray-light;
  }
}

// default focus style
.usa-focus,
:focus,
a:focus {
  @include focus-color($bg-color: "light-color");
}

footer {
  .usa-focus,
  :focus,
  a:focus {
    @include focus-color($bg-color: "light-color");
  }
}

header {
  .usa-focus,
  :focus,
  a:focus {
    @include focus-color($bg-color: "dark-color");
  }
}

.align-left {
  text-align: left;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

@mixin clearfix() {
  content: "";
  display: table;
  clear: both;
}

.skip-nav {
  position: absolute;
  left: -9999px;
  height: 0;
  &:focus {
    outline: 0;
    position: relative;
    left: auto;
    height: auto;
    display: block;
  }
}

.hidden {
    display: none;
}

.tooltips {
  position: relative;
  display: inline;
  span {
    position: absolute;
    width:140px;
    color: $color-white;
    background: $color-black;
    height: 30px;
    line-height: 30px;
    text-align: center;
    visibility: hidden;
    border-radius: 6px;
    &:after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -8px;
      width: 0; height: 0;
      border-top: 8px solid $color-black;
      border-right: 8px solid transparent;
      border-left: 8px solid transparent;
    }
  }
}
th:hover.tooltips span {
  visibility: visible;
  opacity: 0.8;
  bottom: 30px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}

// Animate the id corresponding to the currently-visited URL hash to
// make it easier for users to see
:target {
  animation-duration: 2s;
  animation-name: highlight-fade;
}

@keyframes highlight-fade {
  from {
    background-color: #fff0be;
  }

  to {
    background-color: inherit;
  }
}

.no-scroll {
  overflow: hidden;
}

// Use this mixin when there is light text on a dark background to help
// with font legibility.
@mixin antialias {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}