@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

$active-sort-table-th: $color-table-sorting !default;

@mixin hasIcon($direction) {
  @if $direction == 'left' {
    padding-left: 3rem;

    .glyphicon {
      left: 1rem;
    }
  } @else {
    padding-right: 3rem;

    .glyphicon {
      right: 1rem;
    }
  }
}

.af-btn {
  font-family: $font-family-base;
  background-color: $color-azur;
  color: $table-inverse-color;
  border: 0;
  border-radius: 0;
  min-width: 10rem;
  cursor: pointer;
  font-weight: 100;
  position: relative;
  font-size: 1em;
  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
  box-shadow: inset 0 -3px $color-axa;
  transition: all 0.2s linear;

  &:hover,
  &:focus {
    color: $white;
    background-color: $color-axa;
  }

  &:focus {
    box-shadow: 0 0 3px 3px $color-azur-focused;
  }
  @include generate-universes() {
    background-color: $color;
    color: $white;
    border-radius: 0;
    min-width: 10rem;
    cursor: pointer;
    font-size: 1em;
    box-shadow: inset 0 -3px darken($color, 20%);
    transition: all 0.2s linear;

    &:hover {
      box-shadow: inset 0 -3px darken($color, 20%);
      background-color: darken($color, 20%);
    }
  }

  &--hasiconLeft {
    @include hasIcon('left');
  }

  &--hasiconRight {
    @include hasIcon('right');
  }

  &--disabled {
    cursor: not-allowed;
    background-color: $color-mercury;
    box-shadow: inset 0 -3px $color-silver;
    color: $color-btn-disabled;

    &:hover,
    &:focus {
      background-color: $color-mercury;
      box-shadow: inset 0 -3px $color-silver;
      color: $color-btn-disabled;
      border-color: transparent;
    }
  }

  &--success {
    background-color: $color-btn-success;
    box-shadow: inset 0 -3px $color-btn-success-dark;

    &:hover {
      background-color: $color-btn-success;
      box-shadow: inset 0 -3px $color-btn-success;
    }

    &:focus {
      background-color: $color-btn-success;
      box-shadow: 0 0 3px 3px $color-btn-success-focused;
    }
  }

  &--danger {
    background-color: $color-btn-danger;
    box-shadow: inset 0 -3px $color-btn-danger-dark;

    &:hover {
      background-color: $color-btn-danger;
      box-shadow: inset 0 -3px $color-btn-danger;
    }

    &:focus {
      background-color: $color-btn-danger;
      box-shadow: 0 0 3px 3px $color-btn-danger-focused;
    }
  }

  &--reverse {
    color: $color-azur;
    background-color: $table-inverse-color;
    box-shadow: inset 0 -3px $color-azur;
    border: 2px solid $color-azur;
    border-bottom: none;
    padding: 0.625rem 0.3125rem 0.8125rem 0.3125rem;

    &:hover,
    &:focus {
      color: $white;
      background-color: $color-axa;
      box-shadow: inset 0 -3px $color-axa;
      border-color: $color-axa;
    }

    &:focus {
      box-shadow: 0 0 3px 3px $color-azur-focused;
    }
  }

  &--reverse.af-btn--disabled {
    cursor: not-allowed;
    background-color: $white;
    box-shadow: inset 0 -3px $color-silver;
    color: $color-btn-disabled;
    border-color: $color-silver;
    border-bottom: none;
  }

  &--reverse.af-btn--hasiconLeft {
    @include hasIcon('left');

    padding-right: 1.2rem;
  }

  &--reverse.af-btn--hasiconRight {
    @include hasIcon('right');

    padding-left: 1.2rem;
  }

  &--small {
    padding: 0.625rem 0.3125rem;
    min-width: 3rem;
  }

  &--circle {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid $white;
    background: $color-azur;
    border-radius: 50%;
    text-align: center;
    color: $white;
    box-sizing: border-box;
    position: relative;

    &:hover {
      background-color: $white;
      color: $brand-primary;
      border-color: $brand-primary;
    }

    &:focus {
      color: $white;
      outline: none;

      &:hover {
        color: $brand-primary;
      }
    }

    .glyphicon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  &--circle-small {
    @extend .af-btn--circle;

    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.625rem;
    cursor: pointer;

    .af-more-help {
      font-weight: 900;
    }
  }

  &__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  &--circle-reverse {
    background: $white;
    border-color: $brand-primary;
    color: $brand-primary;

    &:focus {
      color: $brand-primary;
      box-shadow: $btn-focus-box-shadow;
      outline: none;

      &:hover {
        color: $white;
      }
    }

    &:hover {
      background: $brand-primary;
      color: $white;
    }
  }

  &--circle-menu {
    @include media-breakpoint-down(sm) {
      height: $menu-button-size;
      width: $menu-button-size;
      line-height: $menu-button-size;
      color: $white;
      border-color: $white;
      background: transparent;

      &:hover {
        color: $brand-primary;
        background: $white;
      }
    }
  }

  &--table-sorting {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    font-weight: 200;
    text-align: inherit;
    justify-content: space-between;
    cursor: pointer;
    color: inherit;
    padding: 0.881em 1rem 0.881em 1rem;
    box-shadow: inherit;

    &:focus,
    &:hover {
      box-shadow: none;
    }

    &:hover {
      background-color: $color-table-sorting;
    }

    &--active {
      background: $active-sort-table-th;

      &:focus {
        background-color: $active-sort-table-th;
      }
    }
  }

  .glyphicon {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
  }

  .af-badge {
    margin-left: 2rem;
  }
}

.af-more-help {
  font: italic normal 0.9375rem/16px $font-family-sans-serif;
  cursor: pointer;
}