@import '@lightspeed/cirrus-tokens/index.scss';

// Re-used functions for state values

@function cr-button-fill-hover-bg($color) {
  @return darken($color, 5%);
}

@function cr-button-fill-active-bg($top, $bottom) {
  @return linear-gradient(to bottom, $top, $bottom);
}

@function cr-button-outline-bg($top, $bottom, $overshoot) {
  @return linear-gradient(to bottom, $top 38%, $bottom $overshoot);
}

// Define namespace for re-use
// TODO: Use CSS-Modules `generateScopedName` instead
$cr-button-namespace: #{$cr-namespace}button;

// Special cases inset shadows for button variants
$cr-button-primary-shadow: inset 0 -1px 3px 0 rgba(38, 133, 64, 0.2);
$cr-button-primary-shadow-active: inset 0 0 0.375rem rgba(38, 133, 64, 0.4);
$cr-button-secondary-shadow: inset 0 -1px 3px 0 rgba(30, 87, 148, 0.2);
$cr-button-secondary-shadow-active: inset 0 0 0.375rem rgba(30, 87, 148, 0.4);
$cr-button-danger-shadow: inset 0 -1px 3px 0 rgba(135, 38, 38, 0.2);
$cr-button-danger-shadow-active: inset 0 0 0.375rem rgba(135, 38, 38, 0.4);
$cr-button-fill-inset-light: inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
$cr-button-fill-inset-shadow: inset 0 2px 2px 1px rgba($cr-night-300, 0.15);

.#{$cr-button-namespace} {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  height: $cr-spacing-6;
  padding: $cr-spacing-0 $cr-spacing-3;
  background-color: $cr-snow;
  border: 1px solid $cr-gray-100;
  border-radius: $cr-radius-1;
  cursor: pointer;
  font-family: $cr-sans-serif;
  font-size: $cr-text-s;
  font-weight: $cr-bold;
  color: $cr-gray;
  line-height: 1;
  user-select: none;
  text-decoration: none;
  text-align: center;
  transition-property: background, border, box-shadow, color;
  transition-duration: $cr-transition-duration-base;
  background-image: cr-button-fill-active-bg($cr-snow, $cr-snow-200);

  &--icon-only {
    padding-left: 0.5625rem;
    padding-right: 0.5625rem;
  }

  // NOTE: this should probably go in a global selector, or a `cr-root` wrapper class
  // while we incrementally add this to our products.
  box-sizing: border-box;

  .cr-icon {
    fill: $cr-gray;
    color: $cr-snow;
  }

  // States

  &:hover {
    @extend %#{$cr-button-namespace}-hover;
  }

  &:focus {
    @extend %#{$cr-button-namespace}-focus;
  }

  &:active,
  &.cr-button--active,
  &:focus:active {
    @extend %#{$cr-button-namespace}-active;
  }

  &:disabled,
  &.cr-button--disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.5;
    box-shadow: none;
  }

  // Sizes

  &--small {
    height: $cr-spacing-5;
    padding-left: $cr-spacing-2;
    padding-right: $cr-spacing-2;
    font-size: $cr-text-xs;

    &.cr-button--icon-only {
      padding-left: 0.4375rem;
      padding-right: 0.4375rem;
    }
  }

  &--large {
    height: $cr-spacing-7;
    padding-left: $cr-spacing-4;
    padding-right: $cr-spacing-4;
    font-size: $cr-text;

    &.cr-button--icon-only {
      padding-left: 0.6875rem;
      padding-right: 0.6875rem;
    }
  }

  &--xlarge {
    height: $cr-spacing-9;
    padding-left: $cr-spacing-6;
    padding-right: $cr-spacing-6;
    font-size: $cr-text-l;
    border-radius: $cr-radius-2;

    &.cr-button--icon-only {
      padding-left: 0.875rem;
      padding-right: 0.875rem;
    }
  }

  &--block {
    display: flex;
    width: 100%;
  }

  // Variations

  &--primary {
    border-color: $cr-green;
    background-image: cr-button-outline-bg($cr-snow, $cr-green-100, 205%);
    color: $cr-green;

    .cr-icon {
      fill: $cr-green;
    }

    &:hover {
      @extend %#{$cr-button-namespace}-primary-hover;
    }

    &:active,
    &.cr-button--active,
    &:focus:active {
      @extend %#{$cr-button-namespace}-primary-active;
    }

    &:disabled,
    &.cr-button--disabled {
      box-shadow: none;
    }
  }

  &--primary.#{$cr-button-namespace}--fill {
    background-color: $cr-green;
    background-image: cr-button-fill-active-bg($cr-green-200, $cr-green);
    border-color: $cr-green-300;
    color: $cr-snow;
    box-shadow: $cr-button-fill-inset-light;

    .cr-icon {
      fill: $cr-snow;
      color: $cr-green;
    }

    &:hover {
      @extend %#{$cr-button-namespace}-primary-fill-hover;
    }

    &:active,
    &.cr-button--active,
    &:focus:active {
      @extend %#{$cr-button-namespace}-primary-fill-active;
    }

    &:disabled,
    &.cr-button--disabled {
      box-shadow: none;
    }
  }

  &--secondary {
    border-color: $cr-blue;
    background-image: cr-button-outline-bg($cr-snow, $cr-blue-100, 138%);
    color: $cr-blue;

    .cr-icon {
      fill: $cr-blue;
    }

    &:hover {
      @extend %#{$cr-button-namespace}-secondary-hover;
    }

    &:active,
    &.cr-button--active,
    &:focus:active {
      @extend %#{$cr-button-namespace}-secondary-active;
    }

    &:disabled,
    &.cr-button--disabled {
      box-shadow: none;
    }
  }

  &--secondary.#{$cr-button-namespace}--fill {
    background-color: $cr-blue;
    background-image: cr-button-fill-active-bg($cr-blue-200, $cr-blue);
    border-color: $cr-blue-300;
    color: $cr-snow;
    box-shadow: $cr-button-fill-inset-light;

    .cr-icon {
      fill: $cr-snow;
      color: $cr-blue;
    }

    &:hover {
      @extend %#{$cr-button-namespace}-secondary-fill-hover;
    }

    &:active,
    &.cr-button--active,
    &:focus:active {
      @extend %#{$cr-button-namespace}-secondary-fill-active;
    }

    &:disabled,
    &.cr-button--disabled {
      box-shadow: none;
    }
  }

  &--danger {
    border-color: $cr-maple-200;
    background-image: cr-button-outline-bg($cr-snow, $cr-maple-100, 220%);
    color: $cr-maple-200;

    .cr-icon {
      fill: $cr-maple-200;
    }

    &:hover {
      @extend %#{$cr-button-namespace}-danger-hover;
    }

    &:active,
    &.cr-button--active,
    &:focus:active {
      @extend %#{$cr-button-namespace}-danger-active;
    }

    &:disabled,
    &.cr-button--disabled {
      box-shadow: none;
    }
  }

  &--danger.#{$cr-button-namespace}--fill {
    background-color: $cr-maple;
    background-image: cr-button-fill-active-bg($cr-maple, $cr-maple-200);
    border-color: $cr-maple-300;
    color: $cr-snow;
    box-shadow: $cr-button-fill-inset-light;

    .cr-icon {
      fill: $cr-snow;
      color: $cr-maple-200;
    }

    &:hover {
      @extend %#{$cr-button-namespace}-danger-fill-hover;
    }

    &:active,
    &.cr-button--active,
    &:focus:active {
      @extend %#{$cr-button-namespace}-danger-fill-active;
    }

    &:disabled,
    &.cr-button--disabled {
      box-shadow: none;
    }
  }
}

.cr-button {
  .cr-button__content {
    display: inline-flex;
    align-self: center;

    > * {
      align-self: center;
    }
  }

  &:not(.cr-button--no-spacing) {
    .cr-button__content:not(.cr-button__content--loading) + .cr-button__content {
      margin-left: 0.5rem;
    }
  }

  &::before,
  &::after {
    content: '';
    flex: 1 0 auto;
  }
}

.cr-button--loading {
  > :not(.cr-button__content--loading) {
    opacity: 0;
  }

  .cr-button__content--loading {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

// State placeholders, to be re-used for visual regression testing

%#{$cr-button-namespace}-hover {
  background-color: $cr-snow-200;
  box-shadow: none;
  color: $cr-gray;
  background-image: cr-button-fill-active-bg($cr-snow-200, $cr-snow-200);
}

%#{$cr-button-namespace}-active {
  box-shadow: $cr-inner-shadow-2;
  background-color: $cr-snow-200;
}

%#{$cr-button-namespace}-focus {
  outline: thin dotted;
  box-shadow: none;
}

// Variants

%#{$cr-button-namespace}-primary-hover {
  background-color: $cr-green-100;
  color: $cr-green-300;
  box-shadow: none;
  background-image: none;

  .cr-icon {
    fill: $cr-green-300;
    color: $cr-green-100;
  }
}

%#{$cr-button-namespace}-primary-active {
  background-color: $cr-green-100;
  color: $cr-green-300;
  box-shadow: $cr-button-primary-shadow-active;

  .cr-icon {
    fill: $cr-green-300;
    color: $cr-green-100;
  }
}

%#{$cr-button-namespace}-primary-fill-hover {
  background-color: $cr-green;
  border-color: rgba($cr-night, 0.5);
  color: $cr-snow;
  background-image: none;
  box-shadow: $cr-button-fill-inset-light;
  transition: box-shadow $cr-transition-duration-fast linear;

  .cr-icon {
    fill: $cr-snow;
    color: cr-button-fill-hover-bg($cr-green);
  }
}

%#{$cr-button-namespace}-primary-fill-active {
  background-color: darken($cr-green, 2%);
  background-image: none;
  color: $cr-snow;
  border-color: rgba($cr-night, 0.5);
  box-shadow: $cr-button-fill-inset-shadow;
  transition: box-shadow $cr-transition-duration-fast linear;

  .cr-icon {
    fill: $cr-snow;
    color: cr-button-fill-hover-bg($cr-green);
  }
}

%#{$cr-button-namespace}-secondary-hover {
  background-color: $cr-blue-100;
  color: $cr-blue-300;
  box-shadow: none;
  background-image: none;

  .cr-icon {
    fill: $cr-blue-300;
    color: $cr-blue-100;
  }
}

%#{$cr-button-namespace}-secondary-active {
  background-color: $cr-blue-100;
  color: $cr-blue-300;
  box-shadow: $cr-button-secondary-shadow-active;

  .cr-icon {
    fill: $cr-blue-300;
    color: $cr-blue-100;
  }
}

%#{$cr-button-namespace}-secondary-fill-hover {
  background-color: $cr-blue;
  border-color: rgba($cr-night, 0.5);
  color: $cr-snow;
  background-image: none;
  box-shadow: $cr-button-fill-inset-light;

  .cr-icon {
    fill: $cr-snow;
    color: cr-button-fill-hover-bg($cr-blue);
  }
}

%#{$cr-button-namespace}-secondary-fill-active {
  background-color: cr-button-fill-hover-bg($cr-blue);
  background-image: none;
  color: $cr-snow;
  border-color: rgba($cr-night, 0.5);
  box-shadow: $cr-button-fill-inset-shadow;
  transition: box-shadow $cr-transition-duration-fast linear;

  .cr-icon {
    fill: $cr-snow;
    color: cr-button-fill-hover-bg($cr-blue);
  }
}

%#{$cr-button-namespace}-danger-hover {
  background-color: $cr-maple-100;
  color: $cr-maple-300;
  box-shadow: none;
  background-image: none;

  .cr-icon {
    fill: $cr-maple-300;
    color: $cr-maple-100;
  }
}

%#{$cr-button-namespace}-danger-active {
  background-color: $cr-maple-100;
  color: $cr-maple-300;
  box-shadow: $cr-button-danger-shadow-active;

  .cr-icon {
    fill: $cr-maple-300;
    color: $cr-maple-100;
  }
}

%#{$cr-button-namespace}-danger-fill-hover {
  background-color: $cr-maple-200;
  border-color: rgba($cr-night, 0.5);
  color: $cr-snow;
  background-image: cr-button-fill-active-bg($cr-maple-200, $cr-maple-200);
  box-shadow: $cr-button-fill-inset-light;

  .cr-icon {
    fill: $cr-snow;
    color: cr-button-fill-hover-bg($cr-maple-200);
  }
}

%#{$cr-button-namespace}-danger-fill-active {
  background-color: cr-button-fill-hover-bg($cr-maple-200);
  background-image: none;
  color: $cr-snow;
  border-color: rgba($cr-night, 0.5);
  box-shadow: $cr-button-fill-inset-shadow;
  transition: box-shadow $cr-transition-duration-fast linear;

  .cr-icon {
    fill: $cr-snow;
    color: cr-button-fill-hover-bg($cr-maple-200);
  }
}