// =============================================================================
// BASE
// =============================================================================

$border-radius: 4px;

@mixin clearfix {
  &:after {
    content:"";
    display:table;
    clear:both;
  }
}

@mixin truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

@mixin disabled {
  background: transparent;
  border: 1px solid rgba(#ccc,.7);
  color: #ccc;
  pointer-events: none;
}

@mixin failure {
  color: $red;
  border-color: $red;
}

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

@mixin flex-direction($direction) {
  -webkit-flex-direction: $direction;
  -ms-flex-direction: $direction;
  flex-direction: $direction;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;
  -moz-box-ordinal-group: $val;
  -ms-flex-order: $val;
  -webkit-order: $val;
  order: $val;
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

@-webkit-keyframes rotate {
  0% { -webkit-transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); }
}

::selection {
  background: $blue;
  color: #fff;
}

body {
  padding: 0; margin: 0;
  font-family: "Helvetica Neue", sans-serif;
  color: #333;
  background-color: #fafafa;
  -webkit-font-smoothing: subpixel-antialiased;
}


// Paragraphs
p {
  margin: 0;
  margin-bottom: 1.5em;
}

// Links

a {
  text-decoration: none;
  cursor: pointer;
  color: $blue;

  &.disabled {
    cursor: default;
  }
}

.more {
  &:after {
    content: " >";
    font-family: "Checkout Symbols";
  }
}

// Headings

h1 {
  font-size: 1.75rem;
  font-weight: 400;
  margin: 0;
  color: #333;
}

h2 {
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0;
}

h4 {
  color: rgba(#fff, 0.25);
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 400;
  margin: -1rem 0 1.5rem;
}

h5 {
  font-size: 1rem;
  margin: 0; margin-bottom: .5rem;
}

[data-tooltip], [data-tooltip-multiline] { // Add this attribute to the element that needs a tooltip
  position: relative;
  cursor: pointer;
  -webkit-transform: translate3d(0,0,0);

    &:before, &:after { // Hide the tooltip content by default
      visibility: hidden;
      pointer-events: none;
      z-index: 200;
      opacity: 0;
      -webkit-transform: translate3d(0,0,0);
    }

    &:hover:before, &:hover:after { // Show tooltip content on hover
      visibility: visible;
      opacity: 1;
    }

    &:before { // Position tooltip above the element
      content: attr(data-tooltip);
      box-sizing: border-box;
      position: absolute; bottom: 120%; left: 50%;
      margin-bottom: 5px; padding: .75em 1em;

      border-radius: 5px;
      background: #333; background: rgba(68, 68, 68, 0.9);
      font-size: 12px; font-style: normal; font-weight: normal;
      line-height: 1.4em;
      text-align: center;
      color: #fff;
      text-indent: 0;

    }

    &:after { // Triangle hack to make tooltip look like a speech bubble
      content: " ";
      position: absolute; bottom: 120%; left: 50%;
      margin-left: -7px;
      width: 0;
      border-top: 5px solid #333; border-top: 5px solid rgba(68, 68, 68, 0.9);
      border-right: 7px solid transparent; border-left: 7px solid transparent;
      font-size: 0;
      line-height: 0;
    }

}

[data-tooltip-multiline] {
  &:before {
    width: 180px;
    margin-left: -90px;
    white-space: normal;
  }
}

[data-tooltip] {
  &:before {
    white-space: nowrap;
    -webkit-transform: translateX(-50%);
  }
}

a.disabled {
  cursor: default;
}

@font-face {
  font-family: 'Checkout Symbols';
  font-weight: 400;
  src: asset-url('CheckoutSymbols-Regular.eot'); /* IE9 Compat Modes */
  src: asset-url('CheckoutSymbols-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       asset-url('CheckoutSymbols-Regular.woff') format('woff'), /* Modern Browsers */
       asset-url('CheckoutSymbols-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       asset-url('CheckoutSymbols-Regular.svg#9a6d998e14a2d97b6369d42f64b6816f') format('svg'); /* Legacy iOS */
  font-style: normal;
}

.hidden {
  display: none;
}


.flash {
  transform: translateX(-50%);
  left: 50%;
  position: fixed;
  padding: 1em;
  border-radius: 4px;
  min-width: 30%;
  text-align: center;
  z-index: 1;
}

.flash-success {
  background-color: #E2F1FF;
}

.flash-warning {
  background-color: orange;
}