/**
 * icons
 */
$sprites: sprite-map("icons/*.png");
$sprites-retina: sprite-map("icons-2x/*.png");

@mixin sprite-background($name) {
  // background-image: sprite-url($sprites);
  background-position: sprite-position($sprites, $name);
  // background-repeat: no-repeat;
  // display: block;
  // height: image-height(sprite-file($sprites, $name));
  // width: image-width(sprite-file($sprites, $name));
  @media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) {
    // Workaround for https://gist.github.com/2140082
    @if (sprite-position($sprites, $name) != sprite-position($sprites-retina, $name)) {
      $ypos: round(nth(sprite-position($sprites-retina, $name), 2) / 2);
      background-position: 0 $ypos;
    }
    // Hard coded width of the normal sprite image. There must be a smarter way to do this.
    // @include background-size(auto 256px);
    // background-image: sprite-url($sprites-retina);
  }
}


%i-base {
  display: inline-block;
  vertical-align: text-bottom;
  text-indent: -9999em;
  background-image: sprite-url($sprites);
  background-repeat: no-repeat;
  &:hover {
    @include opacity(0.75);
  }
  @media
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) {
    // Hard coded width of the normal sprite image. There must be a smarter way to do this.
    @include background-size(auto 256px);
    background-image: sprite-url($sprites-retina);
  }
}

%i-16 {
  @extend %i-base;
  width: 16px;
  height: 16px;
}

%i-24 {
  @extend %i-base;
  width: 24px;
  height: 24px;
}

.i-edit {
  @extend %i-16;
  @include sprite-background(icon-edit);
}
.i-delete {
  @extend %i-16;
  @include sprite-background(icon-delete);
}


// 大号上传按钮

.i-upload {
  @extend %i-24;
  @include sprite-background(icon-upload);
}

.i-upload-active {
  @extend %i-24;
  @include sprite-background(icon-upload-active);
}

// 小箭头
.i-caret-up, .i-caret-down, .i-caret-left, .i-caret-right {
  display: inline-block;
  border-style: solid;
  border-color: transparent transparent #BBB transparent;
  border-width: 3px 4px 5px;
}
.i-caret-down {
  border-color: #BBB transparent transparent transparent;
  border-width: 5px 4px 3px;
}
.i-caret-left {
  border-color: transparent #BBB transparent transparent;
  border-width: 4px 5px 4px 3px;
}
.i-caret-right {
  border-color: transparent transparent transparent #BBB;
  border-width: 4px 3px 4px 5px;
}

.i-exlink {
  @extend %i-16;
  @include sprite-background(icon-exlink);
}


/* 文件类型图标 */

.mime-office {
  @extend %i-16;
  @include sprite-background(mime-office);
}

.mime-text {
  @extend %i-16;
  @include sprite-background(mime-text);
}

.mime-image {
  @extend %i-16;
  @include sprite-background(mime-image);
}

.mime-html {
  @extend %i-16;
  @include sprite-background(mime-html);
}

.mime-archive {
  @extend %i-16;
  @include sprite-background(mime-archive);
}

.mime-application {
  @extend %i-16;
  @include sprite-background(mime-application);
}

.mime-audio {
  @extend %i-16;
  @include sprite-background(mime-audio);
}

.mime-script {
  @extend %i-16;
  @include sprite-background(mime-script);
}

.mime-video {
  @extend %i-16;
  @include sprite-background(mime-video);
}

.mime-unknow {
  @extend %i-16;
  @include sprite-background(mime-unknow);
}


/* Logo 图标 */
.i-logo, .i-logo-s {
  width: 169px;
  height: 40px;
  display: inline-block;
  background: url("../img/typecho-logo.svg") no-repeat;
  text-indent: -9999em;
  @include background-size(auto 40px);
  @include opacity(.15);
  &:hover {
    @include opacity(.2);
  }
}
.i-logo-s {
  width: 26px;
  height: 26px;
  @include background-size(auto 26px);
}

