// @file
// Custom sass mixins
//
// Define the custom mixins for your project here.
// http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#defining_a_mixin

// Makes an element visually hidden, but accessible.
// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
@mixin element-invisible {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

// Turns off the element-invisible effect.
@mixin element-invisible-off {
  position: static !important;
  clip: auto;
  height: auto;
  width: auto;
  overflow: auto;
}

// Makes an element visually hidden by default, but visible when focused.
@mixin element-focusable {
  @include element-invisible;

  &:active,
  &:focus {
    @include element-invisible-off;
  }
}


@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin linear-gradient($color1, $color2, $start:0%, $end:100%) {
  /* IE10 Consumer Preview */
  background-image: -ms-linear-gradient(top, #{$color1} #{$start}, #{$color2} #{$end});

  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(top, #{$color1} #{$start}, #{$color2} #{$end});

  /* Opera */
  background-image: -o-linear-gradient(top, #{$color1} #{$start}, #{$color2} #{$end});

  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(top, #{$color1} #{$start}, #{$color2} #{$end});
  /* IE6 & IE7 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color1}', endColorstr='#{$color2}');
  /* IE8*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color1}', endColorstr='#{$color2}')";

  background-color: $color2;
}


@keyframes underline {
  0% {
    background-size: 0 0.1em;
  }
  100% {
    background-size: 100% 0.1em;
  }
}
@keyframes scaleup {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes vibrate {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(-4deg); }
  20% { transform: rotate(4deg); }
  30% { transform: rotate(0deg); }
  40% { transform: rotate(4deg); }
  50% { transform: rotate(-4deg); }
  60% { transform: rotate(0deg); }
  70% { transform: rotate(-4deg); }
  80% { transform: rotate(4deg); }
  90% { transform: rotate(0deg); }
  100% { transform: rotate(-4deg); }
}


@mixin nav-icon($path) {
  &::before {
    content: "";
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    -webkit-mask: url($path) no-repeat center / contain;
    mask: url($path) no-repeat center / contain;
    background-color: currentColor;
    flex-shrink: 0;
    vertical-align: middle;
  }
}

$radius: 8px;

/* colors */
:root {
  --color1: #222220;
  --color2: #666b70;
  --color3: #f2f5f8;
  --surface: #ffffff;
  --border-color: #dfe3e7;
  --btn-primary-bg: #e10513;
  --btn-primary-hover-bg: #c70410;
  --btn-secondary-color: #222220;
  --btn-secondary-hover-bg: #f4f5f6;
  --btn-disabled-bg: #bbb;
  --btn-disabled-color: #999;
  --color-link: #e10513;
  --color-status: green;
  --color-warning: orange;
  --color-error: red;
  --color-tabfocus: #83bded;
  --link-hover-bg: #f4f5f6;
  --doc-row-hover: #e9eef3;
  --font-primary: 'Gill Sans MT', 'Gill Sans', Calibri, Inter, sans-serif;
}