// Copyright (C) 2018 The Trustees of Indiana University
// SPDX-License-Identifier: BSD-3-Clause

@use '../core' as *;
@use 'sass:math';

.#{$prefix}-button {
  align-items: center;
  background-color: $color-blue-500;
  border: math.div($spacing-xxs, 2) solid $color-blue-500;
  border-radius: $spacing-xxs;
  color: $color-white-base;
  cursor: pointer;
  display: inline-flex;
  font-weight: $font-weight-medium;
  gap: $spacing-xs;
  height: $spacing-xl;
  line-height: 1;
  padding: 0 math.div(10rem, 16);
  position: relative;
  text-decoration: none;
  white-space: nowrap;

  // Initially hide any loaders if they're being used inside buttons.

  .#{$prefix}-loader {
    display: none;
  }

  &::-moz-focus-inner {
    border: 0;
  }

  &:focus {
    box-shadow: 0 0 0 math.div($spacing-xxs, 2.5) $color-white-base, 0 0 0 $spacing-xxs $color-blue-400;
    outline: none;
  }

  &:hover {
    background-color: $color-blue-600;
    border-color: $color-blue-600;
    color: $color-white-base;
  }

  &:active {
    background-color: $color-blue-700;
    border-color: $color-blue-700;
  }

  &:disabled,
  &:disabled:hover {
    background-color: $color-black-000;
    color: $color-black-400;
    border-color: $color-black-300;
    cursor: not-allowed;
  }
}

.#{$prefix}-button--secondary {
  background-color: $color-white-base;
  border-color: $color-blue-100;
  color: $color-blue-500;

  &:focus {
    box-shadow: 0 0 0 math.div($spacing-xxs, 2) $color-white-base, 0 0 0 $spacing-xxs $color-blue-400;
    outline: none;
  }

  &:hover {
    background-color: $color-blue-000;
    border-color: $color-blue-100;
    color: $color-blue-600;
  }

  &:active {
    background-color: $color-blue-100;
    border-color: $color-blue-200;
    color: $color-blue-600;
  }
}

.#{$prefix}-button--success {
  background-color: $color-green-500;
  border-color: $color-green-500;

  &:focus {
    box-shadow: 0 0 0 math.div($spacing-xxs, 2) $color-white-base, 0 0 0 $spacing-xxs $color-green-400;
    outline: none;
  }

  &:hover {
    background-color: $color-green-700;
    border-color: $color-green-700;
    color: $color-white-base;
  }

  &:active {
    background-color: $color-green-700;
    border-color: $color-green-700;
  }
}

.#{$prefix}-button--success-secondary {
  background-color: $color-white-base;
  border-color: $color-green-100;
  color: $color-green-500;

  &:focus {
    box-shadow: 0 0 0 math.div($spacing-xxs, 2) $color-white-base, 0 0 0 $spacing-xxs $color-green-400;
    outline: none;
  }

  &:hover {
    background-color: $color-green-000;
    border-color: $color-green-100;
    color: $color-green-600;
  }

  &:active {
    background-color: $color-green-100;
    border-color: $color-green-200;
    color: $color-green-600;
  }
}

.#{$prefix}-button--danger {
  background-color: $color-orange-500;
  border-color: $color-orange-500;

  &:focus {
    box-shadow: 0 0 0 math.div($spacing-xxs, 2) $color-white-base, 0 0 0 $spacing-xxs $color-orange-400;
    outline: none;
  }

  &:hover {
    background-color: $color-orange-600;
    border-color: $color-orange-600;
    color: $color-white-base;
  }

  &:active {
    background-color: $color-orange-700;
    border-color: $color-orange-700;
  }
}

.#{$prefix}-button--danger-secondary {
  background-color: $color-white-base;
  border-color: $color-orange-100;
  color: $color-orange-500;

  &:focus {
    box-shadow: 0 0 0 math.div($spacing-xxs, 2) $color-white-base, 0 0 0 $spacing-xxs $color-orange-400;
    outline: none;
  }

  &:hover {
    background-color: $color-orange-000;
    border-color: $color-orange-100;
    color: $color-orange-600;
  }

  &:active {
    background-color: $color-orange-100;
    border-color: $color-orange-200;
    color: $color-orange-600;
  }
}

// Medium variant is in review.
/*
.#{$prefix}-button--medium {
  height: $spacing-lg;
  padding: 0 math.div(6rem, 16);
}
*/

.#{$prefix}-button--small {
  font-size: $ts-14;
  height: $spacing-md;
  padding: 0 math.div(6rem, 16);
}

.#{$prefix}-button--plain {
  border-color: transparent;
  background-color: transparent;
  color: $color-blue-500;

  &:focus {
    box-shadow: 0 0 0 math.div($spacing-xxs, 2) $color-white-base, 0 0 0 $spacing-xxs $color-blue-400;
    outline: none;
  }

  &:hover {
    background-color: $color-blue-000;
    border-color: transparent;
    color: $color-blue-600;
  }

  &:active {
    background-color: $color-blue-100;
    border-color: transparent;
    color: $color-blue-600;
  }

  &:disabled,
  &:disabled:hover {
    border-color: $color-black-100;
  }
}

.#{$prefix}-button--link {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: $color-blue-500;
  font-weight: $font-weight-medium;
  height: initial;
  padding: 0;
  display: inline-flex;
  align-items: initial;
  transition: none;

  &:hover {
    background-color: transparent;
    color: $color-blue-600;
  }

  &:active {
    color: $color-blue-700;
  }
}

.#{$prefix}-button-group {
  display: flex;

  > *:not(:last-child) {
    margin-right: $spacing-sm;
  }
}

/**
 * Right align buttons.
 */

.#{$prefix}-button-group--right {
  justify-content: flex-end;
}

/**
 * Full-width buttons.
 */

.#{$prefix}-button--full-width {
  display: flex;
  justify-content: center;
  width: 100%;
}

/**
 * Loading state - used in tandem with the Rivet loading indicator
 * found in components/24-loading-indicator/
 */

.#{$prefix}-button--loading,
.#{$prefix}-button--loading[disabled] {
  background-color: $color-black-000;
  border-color: $color-black-300;
  color: $color-black-400;
  justify-content: center;
  position: relative;

  &:hover {
    background-color: $color-black-100;
    color: $color-black-700;
  }

  .#{$prefix}-button__content {
    color: transparent;
  }

  .#{$prefix}-loader {
    border-bottom-color: $color-black-400;
    border-right-color: $color-black-400;
    border-top-color: $color-black-400;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;

    /**
     * This negative margin accounts for the width/height of the
     * default loading indicator above.
     */
    margin-top: -.65rem;
    margin-left: -$spacing-xs;
  }
}