@use '../../sass/abstracts/variables' as *;
@use '../../sass/abstracts/typography';

@mixin button-background(
  $name,
  $background-color,
  $color,
  $invertOnHover: false
) {
  &--#{$name} {
    background-color: $background-color;
    border-color: $background-color;
    color: $color;

    &:active {
      border-color: darken($background-color, 10);
      background-color: lighten($background-color, 10);
      color: $color;
    }

    &:focus {
      outline: 1px auto $color !important;
    }

    &:hover {
      @if $invertOnHover {
        background-color: $color;
        color: $background-color;
      } @else {
        background-color: darken($background-color, 10);
        border-color: darken($background-color, 10);
        color: $color;
      }
    }
  }
}

#{$object-prefix}round-button {
  border-radius: 50%;
  background-color: $light-grey;
  font-size: 1.5rem;
  vertical-align: middle;
  width: 3.125rem;
  line-height: 2.875rem;
  height: 3.125rem;
  box-sizing: border-box;
  text-align: center;
  display: inline-block;
  position: relative;
  transition: all, $transition-effect, 0.15s;

  ::before {
    top: 0; // center the icons
  }

  &--mini {
    width: 2rem;
    line-height: 1.75rem;
    height: 2rem;
    ::before {
      font-size: 0.75rem;
    }
  }

  &--small {
    width: 2.5rem;
    line-height: 2.25rem;
    height: 2.5rem;
  }

  &--extra-small {
    width: 1.875rem;
    line-height: 1.875rem;
    height: 1.875rem;
  }

  &--disabled {
    cursor: not-allowed;
    background-color: darken($light-grey, 5) !important;
    color: $sodra-black-60 !important;
    border-color: $light-grey !important;
    pointer-events: none;
  }

  &__badge {
    @include typography.body-small;
    background: $red;
    height: 1.5625rem;
    width: 1.5625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $white;
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    border-radius: 50%;
    background-clip: padding-box;
    transition: all 0.25s ease;
  }

  &--small &__badge {
    height: 1.3rem;
    width: 1.3rem;
  }

  @include button-background('success', $green, $white);
  @include button-background('info', $blue, $white);
  @include button-background('white', $white, $sodra-black, true);
  @include button-background('black', $sodra-black, $white);
  @include button-background('red', $red, $white);
  @include button-background('red-25', $red-25, $red);
  @include button-background('yellow', $yellow, $sodra-black);
  @include button-background('green', $green, $sodra-black);
  @include button-background('green-50', $green-50, $sodra-green);
  @include button-background('blue-25', $blue-25, $sodra-black);
  @include button-background('blue-50', $blue-50, $dark-blue-50);
  @include button-background('blue', $blue, $sodra-black);
}