.image-view {
  overflow: auto;

  .image-controls {
    background: none;
    position: absolute;
    top: 3px;
    left: 3px;

    a {
      width: 20px;
      height: 20px;
      font-size: 0;
      margin: 2px;
      vertical-align: top;
      border-radius: 2px;
      box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 1px rgba(0, 0, 0, .6);
      position: relative;
      overflow: hidden;
      display: inline-block;

      -webkit-transition: -webkit-transform .1s;
      -webkit-transform-style: preserve-3d;
      -webkit-backface-visibility: hidden;

      &:hover { -webkit-transform: scale(1.09); }
      &:active { -webkit-transform: scale(.96); }

      &:after {
        content: '';
        background: url(atom://image-view/images/transparent-background.png);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    &-color-white {
      background-color: #fff;
      color: #000;
    }

    &-color-black {
      background-color: #000;
      color: #fff;
    }
  }

  .image-container {
    height: 100%;
    width: 100%;
    padding: 10px;
    display: table;
  }

  .image-container-cell {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
  }

  img {
    box-sizing: content-box;
    border: 1px solid #FFF;
    background: #fff url(atom://image-view/images/transparent-background.png) right bottom;
    box-shadow: #999 0 0 0 1px;
    position: relative;
    max-width: none;
  }
}
