.esn-attachment-default-preview {
  .flex-row;
  .fadeIn(0.5s);

  background-color: @m-lightblue;
  color: @m-white;
  position: relative;
  height: 90px;
  width: 220px;
  margin: 5px 0;

  .icon-preview {
    .flex;

    font-size: 44px;
    padding: 6px;
    width: 50%;
    height: 100%;

    a {
      color: @m-white;
      display: block;
      width: 100%;
      height: 100%;
    }

    .icon {
      width: 100%;
      height: 100%;
      font-size: 50px;
      position: relative;

      &:before {
        position: absolute;
        left: 25%;
        top: 15%;
      }
    }
  }

  .metadata {
    .flex-column;

    overflow: hidden;
    padding: 16px 12px;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;

    & > h2 {
      margin: 0;
      line-height: 100%;
      font-size: 13px;
      font-weight: 400;
      color: @m-white;

      a {
        color: @m-white;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    & > h6 {
        color: @m-white;
    }

    & > small {
      margin-bottom: 2px;
      display: block;
    }

    & > h2,
    & > small {
      .text-overflow;
    }
  }

  .cancel {
    .flex-end;
    .flex-shorthand(1);

    opacity: 0.7;
    padding-top: 3px;
    padding-right: 3px;

    a {
      color: @m-white;
      font-weight: bold;
      font-size: larger;
    }
  }

  &:before {
    .transition(width 200ms);
    .backface-visibility(hidden);
    .opacity(0.1);

    content: "";
    width: 0px;
    height: 100%;
    background: @m-black;
    position: absolute;
    left: 0;
    top: 0;
  }

  &:before {
    width: 50%;
  }

  &:hover {
    .metadata {
      color: @m-white;
    }
  }
}