/**
 *    Copyright 2015-2017 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 */

.icon-fancy {
  .btn-bg();
  .default-box-shadow();
  .center-content();
  .circle(100px);
  background-color: @pink;
  padding: 8px 5px 5px; // manual alignment
  border: 10px solid #fff;
  color: #fff;
  font-size: 50px; // icon size
  transition: .25s all;

  .link-hover({
    color: #fff;
    text-decoration: none;
  });

  &:focus {
    .thick-box-shadow();
  }

  &:hover {
    .thicker-box-shadow();
  }

  &:active {
    .default-box-shadow();
  }
}

/**
 *    Copyright 2015-2017 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 */

.icon-fancy {
  .btn-bg();
  .default-box-shadow();
  .center-content();
  .circle(100px);
  background-color: @pink;
  padding: 8px 5px 5px; // manual alignment
  border: 10px solid #fff;
  color: #fff;
  font-size: 40px; // icon size
  transition: .25s all;

  .link-hover({
    color: #fff;
    text-decoration: none;
  });

  &:focus {
    .thick-box-shadow();
  }

  &:hover {
    .thicker-box-shadow();
  }

  &:active {
    .default-box-shadow();
  }
}

Reduce size of heart icon in bottom purchase link
Reduce size of heart icon in bottom purchase link
