// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.btn-circle {
  @top: btn-circle;
  --transition: all 120ms ease-in-out;
  --bg: @osu-colour-l4;
  --bg-hover: @osu-colour-l3;
  --bg-disabled: #333;
  --colour: @osu-colour-c1;
  --colour-hover: @osu-colour-c1;
  .reset-input();
  .circle(@btn-circle-diameter);
  .default-box-shadow();
  cursor: pointer;
  display: inline-block;
  text-shadow: inherit;

  flex: none;
  background-color: var(--bg);
  color: var(--colour);
  transition: var(--transition);
  font-size: 14px;

  .link-hover({
    background-color: var(--bg-hover);
    color: var(--colour-hover);
    text-decoration: none;
    box-shadow: 0 5px 15px fade(#000, 40%);
  });

  &--bbcode {
    .default-text-shadow();
    font-size: 13px;
    box-shadow: none;
    background-color: transparent;

    &:focus,
    &:hover,
    &:active {
      background-color: @osu-colour-l3;
    }
  }

  &--blank {
    background-color: transparent;
    box-shadow: none;
    opacity: 0.7;
    cursor: default;

    &:focus,
    &:hover,
    &:active {
      box-shadow: none;
      background-color: transparent;
    }
  }

  &--follow {
    --bg: hsl(var(--hsl-b3));
    --bg-hover: hsl(var(--hsl-b1));
    --bg-disabled: hsl(var(--hsl-b3));
    --colour: hsl(var(--hsl-l1));
    --colour-hover: hsl(var(--hsl-c1));
    .circle(40px);
    font-size: 12px; // icon size
  }

  &--follow-small {
    --bg: transparent;
    --bg-hover: transparent;
    --bg-disabled: transparent;
    --colour: hsl(var(--hsl-l1));
    --colour-hover: hsl(var(--hsl-c1));
    font-size: 12px; // icon size
    border-radius: 0;
    width: 1em;
    height: $width;
    padding: 0;
    vertical-align: middle;
  }

  &--page-toggle {
    --bg: hsl(var(--hsl-b2));
    --bg-hover: hsl(var(--hsl-b1));
    .center-content();
    .link-plain();
    .link-white();
    font-size: 12px; // icon size
    box-shadow: none;
    position: relative;

    .link-hover({
      box-shadow: none;
    });
  }

  &--page-toggle-detail {
    .circle(40px);
  }

  &--topic-entry {
    .circle(30px);
    box-shadow: none;
    margin: 2.5px;
    font-size: 14px;

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

  &--topic-nav {
    margin: @forum-topic-nav-item--gutter;

    @media @desktop {
      margin: 0 @forum-topic-nav-item--gutter-desktop;
    }
  }

  &--activated,
  &.js-activated {
    background-color: @osu-colour-h2;
    color: @osu-colour-b5;

    &:focus,
    &:hover,
    &:active {
      background-color: @osu-colour-l3;
      color: @osu-colour-b5;
    }
  }

  // colour variations
  &--purple {
    background-color: @purple-dark;

    .link-hover({
      background-color: @purple;
    });

    &.@{top}--activated {
      background-color: @purple-light;

      .link-hover({
        background-color: @purple-lighter;
      });
    }
  }

  &--yellow {
    background-color: @yellow-dark;

    .link-hover({
      background-color: @yellow;
    });

    &.@{top}--activated {
      background-color: @yellow-light;

      .link-hover({
        background-color: @yellow-lighter;
      });
    }
  }

  // overrides everything else
  &[disabled],
  &.js-disabled,
  &--disabled {
    background-color: var(--bg-disabled);
    cursor: not-allowed;
  }

  // some browsers can't display flex for <button>
  &__content {
    .center-content();
    height: 100%;
    width: 100%;
    // for icon-flip
    position: relative;
  }

  &__icon {
    .full-size();
    .center-content();
    --normal-opacity: 1;
    --hover-opacity: 1;

    opacity: var(--normal-opacity);
    transition: var(--transition);

    .@{top}:hover &,
    .@{top}:active & {
      opacity: var(--hover-opacity);
    }

    &--hover-hide {
      --normal-opacity: 1;
      --hover-opacity: 0;
    }

    &--hover-show {
      --normal-opacity: 0;
      --hover-opacity: 1;
    }
  }
}