// This file is part of Coog. The COPYRIGHT file at the top level of
// this repository contains the full copyright notices and license terms.

@import '../variables';
@import '../typography.scss';
@import '../_md-variables.scss';

$color-error: rgb(183, 28, 28);
$color-error-hover: rgba($color-error, 0.1);
$color-warning: rgb(255, 153, 0);
$color-warning-hover: rgba($color-warning, 0.1);
$color-default: rgb(71, 71, 71);
$color-default-hover: rgba($color-default, 0.1);
$color-primary: rgb(67, 169, 253);
$color-primary-hover: rgba($color-primary, 0.1);
$color-disabled: rgb(189, 189, 189);
$color-spinner-button: rgb(3, 192, 100);
//Color
$blue: $color-theme-2;
$red: $material-red-900;
$purple: $material-purple-900;
$green: $material-green-900;
$orange: $material-orange-900;
$yellow: $material-yellow-900;
$black: $material-blue-grey-900;
$white: white;
$grey: $material-grey-500;

@mixin button-action($color, $bg-color, $border-color) {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 64px;
  box-sizing: border-box;
  padding: 6px 16px;
  border: 1px solid $border-color;
  background-color: $bg-color;
  border-radius: 3px;
  color: $color;
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02857em;
  line-height: 1.75;
  text-transform: uppercase;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;

  .icon {
    margin-right: 12px;
  }
}

@mixin button-action-hover($bg-color, $color: null) {
  background-color: $bg-color;
  color: $color;
  text-decoration: none;
}

@mixin button($color, $bg-color: $white, $border-color: lighten($color, 20%)) {
  .button-default {
    @include button-action($color-default, $bg-color, lighten($color-default, 50%));

    cursor: pointer;

    &:hover {
      @include button-action-hover(rgba($color-default, 0.1));
    }
  }

  .button-primary {
    @include button-action($color, rgba($bg-color, 0.1), $border-color);

    cursor: pointer;

    &:hover {
      @include button-action-hover(rgba($color, 0.1));
    }
  }

  .button-secondary {
    @include button-action(rgba($bg-color, 0.9), $color, $border-color);

    cursor: pointer;

    &:hover {
      @include button-action-hover(rgba($color, 0.1), $color);
    }
  }

  .button-warning {
    @include button-action($color-warning, rgba($bg-color, 0.1), lighten($color-warning, 30%));

    cursor: pointer;

    &:hover {
      @include button-action-hover(rgba($color, 0.1));
    }
  }

  .button-error {
    @include button-action($color-error, rgba($bg-color, 0.1), lighten($color-error, 40%));

    cursor: pointer;

    &:hover {
      @include button-action-hover(rgba($color, 0.1));
    }
  }

  .button-disabled {
    @include button-action(darken($color-disabled, 0%), lighten($color-disabled, 20%), lighten($color-disabled, 10%));

    cursor: not-allowed;

    &:hover {
      @include button-action-hover(lighten($color-disabled, 20%));
    }
  }
}

@mixin button-solid($bg-color, $color: $white, $border-color: lighten($bg-color, 20%)) {
  .button-default {
    @include button-action($color, $color-default, lighten($color-default, 50%));

    cursor: pointer;

    &:hover {
      @include button-action-hover(rgba($color-default, 0.1), $color-default);
    }
  }

  .button-primary {
    @include button-action($color, $bg-color, $border-color);

    cursor: pointer;

    &:hover {
      @include button-action-hover(rgba($color, 0.1), $bg-color);
    }
  }

  .button-secondary {
    @include button-action(rgba($bg-color, 0.9), $color, $border-color);

    cursor: pointer;

    &:hover {
      @include button-action-hover(rgba($bg-color, 0.1), $bg-color);
    }
  }

  .button-warning {
    @include button-action($color, $color-warning, lighten($color-warning, 30%));

    cursor: pointer;

    &:hover {
      @include button-action-hover(rgba($color-warning, 0.1), $color-warning);
    }
  }

  .button-error {
    @include button-action($color, $color-error, lighten($color-error, 40%));

    cursor: pointer;

    &:hover {
      @include button-action-hover(rgba($color-error, 0.1), $color-error);
    }
  }

  .button-disabled {
    @include button-action(lighten($color-disabled, 20%), darken($color-disabled, 0%), lighten($color-disabled, 10%));

    cursor: not-allowed;

    &:hover {
      @include button-action-hover(darken($color-disabled, 0%), lighten($color-disabled, 20%));
    }
  }
}

// default color = blue
.button-99889523-548b-411b-9a64-35296c3da632 {
  @include button($blue);

  &.blue {
    @include button($blue);
  }
  &.red {
    @include button($red);
  }
  &.purple {
    @include button($purple);
  }
  &.orange {
    @include button($orange);
  }
  &.green {
    @include button($green);
  }
  &.yellow {
    @include button($yellow);
  }
  &.black {
    @include button($black);
  }
  &.grey {
    @include button($grey);
  }
  &.white {
    @include button($white, $black);
  }
  &.blue-solid {
    @include button-solid($blue);
  }
  &.red-solid {
    @include button-solid($red);
  }
  &.yellow-solid {
    @include button-solid($yellow);
  }
  &.purple-solid {
    @include button-solid($purple);
  }
  &.orange-solid {
    @include button-solid($orange);
  }
  &.green-solid {
    @include button-solid($green);
  }
  &.black-solid {
    @include button-solid($black);
  }
  &.grey-solid {
    @include button-solid($grey);
  }
  &.b2c-solid {
    @include button-solid(#5e4193);
  }
  &.b2c {
    @include button(#5e4193);
  }
  &.purple-dark {
    @include button(#29347a);
  }
  &.purple-solid-dark {
    @include button-solid(#29347a);
  }
  &.blue-dark {
    @include button(#0a2540);
  }
  &.red-dark {
    @include button($red);
  }
  &.orange-dark {
    @include button($orange);
  }
  &.green-dark {
    @include button($green);
  }
  &.yellow-dark {
    @include button($yellow);
  }
}