@import "../common";

.wen-button {
  max-width: 10em;
  box-sizing: border-box;
  padding: 0.5em 1em;
  font-size: 14px;
  outline: none;
  border-radius: $border-radius;
  border: 1px solid transparent;
  background-color: $default-bg;
  position: relative;
  overflow: hidden;
  cursor: pointer;

  &:hover:not(.primary, .dark, .danger, .warning, .success, .midnightBlue) {
    border: $default-border;
  }

  .wen-wave-dot {
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: rgba(66, 133, 244, 0.2);
    border-radius: 50%;
    opacity: 1;
    visibility: hidden;
  }

  &.wen-wave .wen-wave-dot {
    visibility: initial;
    opacity: 0;
    transition: all 0.6s;
    transform: scale(30);
  }

  &.primary {
    background-color: $primary;
    color: $text-color;

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

  &.danger {
    color: $text-color;
    background-color: $danger;

    &:hover {
      border-color: $danger-light;
      background-color: $danger-light;
    }
  }

  &.warning {
    color: $text-color;
    background-color: $warning;

    &:hover {
      border-color: $warning-light;
      background-color: $warning-light;
    }
  }

  &.success {
    color: $text-color;
    background-color: $success;

    &:hover {
      border-color: $success-light;
      background-color: $success-light;
    }
  }

  &.midnightBlue {
    color: $text-color;
    background-color: $midnightBlue;

    &:hover {
      border-color: $midnightBlue-light;
      background-color: $midnightBlue-light;
    }
  }

  &.dark {
    color: $text-color;
    background-color: black;

    span.wen-wave-dot {
      display: none;
    }

    &:hover {
      border-color: black;
    }
  }

  .wen-loading-icon-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 1;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.2);
  }

  .wen-loading-icon {
    width: 1.2em;
    height: 1.2em;
    animation: icon-loading 1s linear infinite;
  }
}

.wen-loading.wen-button {
  &:hover {
    border-color: transparent;
    cursor: not-allowed;
    &.primary {
      background-color: $primary;
    }
    &.danger {
      background-color: $danger;
    }
    &.warning {
      background-color: $warning;
    }
    &.success {
      background-color: $success;
    }
    &.midnightBlue {
      background-color: $midnightBlue;
    }
  }

  .wen-button-inner {
    filter: blur(1px);
  }

  .wen-loading-icon-wrapper {
    display: flex;
  }

}

@keyframes icon-loading {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}



