$border: #a7a7ad;
$bg: rgba(10,0,5,0.8);
$shadow: transparentize( $bg , 0.3 );

$gap: 3px;

$crafting: #f4d403;
$trash: #999;
$common: white;
$uncommon: #24ee10;
$rare: #0070DD;
$epic: #ad23ed;
$legendary: #fa7c18;
$heirloom: #e5d9c5;
$flavour: #FFD100;

@mixin socket( $color: "meta" ) {
  
  $srcUrl: "http://wowimg.zamimg.com/images/";
  $socket: $srcUrl + "icons/socket-#{$color}.gif";
  
  background-image: url( $socket );
  background-repeat: no-repeat;
  background-position: left top;
    
}

@mixin money( $type: "copper" ) {
  
  $srcUrl: "http://wowimg.zamimg.com/images/";
  $type: $srcUrl + "icons/money-#{$type}.gif";
  
  background-image: url( $type );
  background-repeat: no-repeat;
  background-position: right;
    
}

.wow-icon {
  
  width: 27px;
  height: 27px; 
  display: inline-block;
  background-image: url( http://wow.zamimg.com/images/wow/icons/medium/inv_misc_questionmark.jpg );
  background-repeat: no-repeat;
  background-position: center;
  border-width: 4px;
  
  position: relative;
  margin: 2px 2px;

  box-sizing: content-box;
  box-shadow:
    -1px -1px 1px $shadow,
    -1px 1px 1px $shadow,
    1px 1px 1px $shadow,
    1px -1px 1px $shadow;
  
  .stack {
    
    color: white;
    font-size: 13px;
    font-style: normal;
    text-align: right;
    
    text-shadow: 
      0 0 2px black, 
      0 0 2px black, 
      0 0 3px black,
      0 0 3px black, 
      0 0 1px black,
      0 0 1px black;
    
    position: absolute;
    right: -1px;
    bottom: -4px;
    
  }
  
  &:after {
    
    content: "";
    position: absolute;
    width: 36px;
    height: 36px;
    left: -4px;
    top: -4px;
    
    border-radius: 4px;
    box-shadow: inset 0 0 5px black;
    
    transition: all 0.1s ease;
    
  }
  
  &:hover {
    
   &:after {
     
     box-shadow: 
       inset 0 0 9px rgba(30,180,230,0.9),
       inset 0 0 5px rgba(30,180,230,0.6);
     
   } 
    
  }
  
}


.wow-icon,
.wow-item {
  

  border-style: solid;
  border-width: 5px;
  border-image: url(http://files.simey.me/wow-tooltip-border-2.png) 5 repeat;
  border-radius: 4px;
  
}



.wow-item {
  
  position: absolute;
  
  color: white;
  background-color: $bg;
  
  font-family: "friz", serif;
  font-size: 12px;
  font-weight: normal;
  padding: 0.5em 0.6em;
  text-shadow: 0 1px 0 rgba(0,0,0,1);
  
  box-shadow:
    -1px -1px 1px $shadow,
    -1px 1px 1px $shadow,
    1px 1px 1px $shadow,
    1px -1px 1px $shadow;
  
  max-width: 24em;
  
  transition: 
    opacity 0.05s ease-out 0.05s,
    transform 0.1s ease-out 0.05s;
  
  &.hidden {
    
    visibility: hidden;
    opacity: 0;
    transform: scale(0.95);

    transition: 
      opacity 0.05s ease-out 0.05s,
      transform 0.1s ease-out 0.05s,
      visibility 0.01s linear 0.15s;
    
  }
  
  p {
    padding: 0;
    margin: 0;
  }
  
  &[data-quality=crafting] {
    .header__title {
      color: $crafting;
    }
  }
  &[data-quality=heirloom] {
    .header__title {
      color: $heirloom;
    }
  }
  &[data-quality=trash] {
    .header__title {
      color: $trash;
    }
  }
  &[data-quality=common] {
    .header__title {
      color: $common;
    }
  }
  &[data-quality=uncommon] {
    .header__title {
      color: $uncommon;
    }
  }
  &[data-quality=rare] {
    .header__title {
      color: $rare;
    }
  }
  &[data-quality=epic] {
    .header__title {
      color: $epic;
    }
  }
  &[data-quality=legendary] {
    .header__title {
      color: $legendary;
    }
  }
  
}

.info__item-level {
    color: #ffd100;
}
  
.wow-item__header {

  .header__title {

    margin-bottom: $gap;
    font-size: 1.12em;
    margin-right: 1em;

  }

}

.wow-item__type {
   
  overflow: hidden;
  margin-top: $gap;
  
  .type {

    &__slot,
    &__item {

      float: left;

    }
    
    &__item {

      float: right;
      text-align: right;

    }

  }
    
}

.wow-item__stats {
   
  overflow: hidden;
  
  .stats {
    
    &__damage-armor {
      float: left;
      margin-right: 5em;
    }

    &__speed {
      float: right;
      text-align: right;
    }
    
    &__list-item:first-child {
      margin-top: $gap;
    }

    &__dps {
      float: none;
      clear: both;
    }

    &__secondary {
      color: $uncommon;
    }
    
  }

}

.wow-item__price {
    .price {
        &__gold {
            @include money( "gold" );
            float: left;
            padding-right: 15px;
            margin-left: 2px;
        }
        
        &__silver {
            @include money( "silver" );
            float: left;
            padding-right: 15px;
            margin-left: 2px;
        }
        
        &__copper {
            @include money( "copper" );
            float: left;
            padding-right: 15px;
            margin-left: 2px;
        }
    }
}

.wow-item__enchantments {
  
  margin: $gap*2 0;
  
  .enchantments {
     
    &__enchant {
      
      color: $uncommon;
      
    }
    
    &__socket {
      
      @include socket();
      text-indent: 1.8em;
      text-transform: capitalize;
      
      &.socket--Meta {
        @include socket( "meta" );
      }
      
      &.socket--Blue {
        @include socket( "blue" );
      }
      
      &.socket--Red {
        @include socket( "red" );
      }
      
      &.socket--Yellow {
        @include socket( "yellow" );
      }
      
      &.socket--Prismatic {
        @include socket( "prismatic" );
      }
      
    }
    
    &__sockets {
      
      margin: $gap 0;
      
    }
    
    &__socket,
    &__socket-bonus {
      
      color: $trash;
      
    }
    
  }
  
}


.wow-item__info {
  
  .info {
    
    &__chance-on-hit {
      
      color: $uncommon;
      
    }
    
    &__flavour-text {
      
      color: $flavour;
      margin-top: $gap;
      
    }
    
  }
  
}


.wow-item__bonuses {
  
  margin-top: $gap;
  
  .bonuses {
    
    &__bonus {
      
      color: $uncommon;
      margin: $gap 0 0;
      
    }
    
  }
  
}