@use 'styles/mixins' as *;

:host {
  display: block;
}

.button {
  @include flex(null, center);

  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 100ms ease-in-out;

  &.primary {
    border: none;
    background-color: var(--color-primary);
    color: var(--color-always-white);
    padding: {
      top: 13px;
      bottom: 13px;
    }

    &:disabled {
      background-color: var(--color-background-secondary);
      opacity: 0.5;
      cursor: not-allowed;
    }

    &:not(.loading, :disabled):hover {
      background-color: #6f93d4;
    }
  }

  // TODO: (AlexanderFSP) Support `:disabled` & `.loading` states
  &.secondary {
    border: 1px solid var(--color-primary);
    background-color: var(--color-always-white);
    color: var(--color-primary);

    &:hover {
      background-color: rgba(var(--color-secondary-rgb), 0.4);
    }
  }

  &.loading {
    cursor: initial;
  }
}

.loading-icon {
  @include rectangle(18.4px);

  animation: spin 3s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
