// ===
// Button
// ===
$button-color-map: (
        "primary": (
                $color-primary, // color
                $color-primary-hover, // color hover
                #fff, // text color
        ),
        "secondary": (
                $color-secondary,
                darken($color-secondary, 10%),
                $color-text-dark
        ),
        "dark": (
                #C6C6BA,
                darken($color-text-dark, 10%),
                $color-text-dark
        ),
        "light": (
                #DCDFE6,
                #C0C4CC,
                $color-text-dark
        ),
        "facebook": (
                #C6C6BA,
                #4267B2,
                $color-text-dark
        ),
        "param": (
                #C6C6BA,
                $color-primary,
                $color-text-dark
        ),
);

@function capitalize($string) {
  @return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2);
}

.baseButton {
  color: #fff;
  cursor: pointer;
  background: grey;
  border: none;
  font-size: 16px;
  font-weight: 400;
  transition: background 0.3s, border 0.3s, color 0.3s, opacity 0.3s;
  width: 335px;
  padding: 1.2rem 0;
  letter-spacing: 0.2em;
  text-decoration: none !important;
  opacity: 1;
  white-space: nowrap;
  display: block;
  line-height: 1.15;
  text-align: center;
  &:focus {
    outline: none;
  }
  &:disabled, &.isLoading {
    opacity: 0.5;
  }
  &:disabled {
    cursor: not-allowed;
  }
  &.isLoading {
    cursor: wait;
  }
  @each $color, $value in $button-color-map {
    &.isStyle#{capitalize($color)} {
      background: nth($value, 1);
      color: nth($value, 3);
      &:hover:not(:disabled) {
        background: nth($value, 2);
      }
      &.isOutline {
        border: 1px solid nth($value, 1);
        color: $color-text-dark;
        &:hover:not(:disabled) {
          background: transparent;
          border: 1px solid nth($value, 2);
          color: nth($value, 2);
        }
      }
    }
  }
  &.isStyleLink {
    letter-spacing: 0.2em;
    background: transparent;
    color: $color-text-dark;
    border-bottom: 1px solid $color-text-dark;
    border-radius: 0;
    padding: 0.5rem 0;
    font-size: 14px;
    width: auto;
    &:hover:not(:disabled) {
      color: $color-primary;
      border-bottom: 1px solid $color-primary;
    }
  }
  &.isStyleTextLink {
    letter-spacing: 0.2em;
    background: transparent;
    color: $color-text-dark;
    border-bottom: 1px solid $color-text-dark;
    border-radius: 0;
    padding: 0.1rem 0;
    font-size: inherit;
    width: auto;
    &:hover:not(:disabled) {
      color: $color-primary;
      border-bottom: 1px solid $color-primary;
    }
    &.isPrimary {
      color: nth(map-get($button-color-map, 'primary'), 1);
      border-bottom: 1px solid nth(map-get($button-color-map, 'primary'), 2);
      &:hover:not(:disabled) {
        color: nth(map-get($button-color-map, 'primary'), 2);
        border-bottom: 1px solid nth(map-get($button-color-map, 'primary'), 2);
      }
    }
  }
  &.isRadius {
    border-radius: 8px;
  }
  &.isOutline {
    background: transparent;
    &:hover:not(:disabled) {
      color: #fff;
    }
  }
  &.isAuto {
    width: auto;
  }
  &.isFull {
    width: 100%;
  }
  &.isSmall {
    padding: 0.9rem 1.1rem;
    width: auto;
  }
  &.isGradient{
    background:linear-gradient(to left,#242A79,#61DDED);
  }
  &.isSite{
    background:#4CB0CC;
  }
}

@keyframes spinAround {
  0% {
    transform: rotate(0turn);
  }
  100% {
    transform: rotate(1turn);
  }
}