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

@mixin button-background($name, $color, $background-color, $lighten: 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;
    }

    &:hover {
      @if $lighten {
        background-color: lighten($background-color, 10);
        filter: grayscale(1);
        border-color: lighten($background-color, 10);
      } @else {
        background-color: darken($background-color, 10);
        border-color: darken($background-color, 10);
      }
    }
  }
}

a#{$object-prefix}button,
#{$object-prefix}button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 0.25s;
  touch-action: manipulation;
  outline: none;
  height: 3rem;
  line-height: normal;
  vertical-align: middle;
  background-color: transparent;
  color: $sodra-black;
  cursor: pointer;
  text-decoration: none;
  padding: 0 2.5rem;
  border: 1px solid transparent;
  text-align: center;
  position: relative;
  border-radius: 1.5rem;
  transition: all $transition-effect $transition-duration;
  @include typography.headline-small;

  img {
    height: 50%;
    float: right;
    margin-left: 0.75rem;
  }

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

  &--no-wrap {
    white-space: nowrap;
  }

  &--small {
    height: 2rem;
    padding: 0 0.25rem;
    border-radius: 1rem;
    @include typography.title-medium;
  }

  &--medium {
    height: 2.5rem;
    padding: 0 0.5rem;
    border-radius: 1.25rem;
    @include typography.title-medium;
  }

  &--large {
    height: 3.25rem;
    padding: 0 2rem;
    border-radius: 2rem;
    @include typography.headline-large;
  }

  &--setWidth-16 {
    min-width: 16rem;
    text-align: center;
  }

  &--forward-icon {
    &::after {
      @include mixins.unity-symbols('arrow-forward');
      margin-left: 0.5rem;
      transition: transform 0.3s ease-out;
      vertical-align: top;
    }

    &-24 {
      &::after {
        @include mixins.unity-symbols('arrow-forward', 1.5rem);
        margin-left: 0.9rem;
        transition: transform 0.3s ease-out;
        vertical-align: top;
      }
    }
  }

  &--bounce {
    &:hover {
      &::after {
        transform: translateX(4px);
      }
    }
  }

  &--back {
    &::before {
      @include mixins.unity-symbols('arrow-back');
      margin-right: 0.5rem;
    }
  }

  @include button-background('black', $white, $sodra-black, true);
  @include button-background('white', $sodra-black, $white);
  @include button-background('primary', $white, $sodra-green);
  @include button-background('light-grey', $sodra-black, $light-grey);
  @include button-background('red', $white, $red);
  @include button-background('red-25', $red, $red-25);
  @include button-background('yellow', $sodra-black, $yellow);
  @include button-background('green', $sodra-black, $green);
  @include button-background('green-50', $sodra-green, $green-50);
  @include button-background('blue-25', $sodra-black, $blue-25);
  @include button-background('blue-50', $dark-blue-50, $blue-50);
  @include button-background('blue', $sodra-black, $blue);

  &--secondary {
    border: 2px solid $sodra-black;
    color: $sodra-black;

    &:focus {
      outline: 2px solid $white;
    }

    &:hover,
    &:focus {
      border-color: $sodra-black-75;
    }
  }

  &--ghost {
    border: 2px solid $white;
    background: transparent;
    color: $white;

    &:focus {
      outline: 2px solid $white;
    }

    &:hover {
      border-color: $sodra-black-10;
    }
  }

  #{$object-prefix}loader {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    margin-top: -12px;
    width: 24px;
    height: 24px;

    &:before {
      width: 24px;
      height: 24px;
      border-width: 3px;
      box-sizing: border-box;
    }
  }
}
/*
Trigger for menus, dropdowns etc
*/
.js-toggle-open {
  cursor: pointer;
}

/* Buttons in paragraph should have margin bottom */
p #{$object-prefix}button {
  margin-bottom: 4px;
}

// hotfix: This will add an arrow to buttons created in Tinymce without any changes in epi.
// Bellow class can be removed when/if every button is updated in Tinymce
.bannerblock,
.textandimageblock,
.textblock,
.contactusblock {
  #{$object-prefix}button:not(.o-button--forward-icon) {
    @extend #{$object-prefix}button--forward-icon;
    @extend #{$object-prefix}button--bounce;
  }
}