:root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
  --neeto-ui-btn-padding-x: 0.5rem;
  --neeto-ui-btn-padding-y: 0.375rem;
  --neeto-ui-btn-font-size: var(--neeto-ui-text-sm);
  --neeto-ui-btn-font-weight: var(--neeto-ui-font-medium);
  --neeto-ui-btn-line-height: 1rem;
  --neeto-ui-btn-color: rgb(var(--neeto-ui-black));
  --neeto-ui-btn-bg-color: transparent;
  --neeto-ui-btn-border-width: 0;
  --neeto-ui-btn-border-color: transparent;
  --neeto-ui-btn-border-radius: var(--neeto-ui-rounded);
  --neeto-ui-btn-gap: 0.25rem;
  --neeto-ui-btn-icon-size: 1rem;
  --neeto-ui-btn-box-shadow: none;
  --neeto-ui-btn-outline: none;

  // Disabled
  --neeto-ui-btn-disabled-opacity: 0.5;

  // Hover
  --neeto-ui-btn-hover-color: rgb(var(--neeto-ui-black));
  --neeto-ui-btn-hover-bg-color: transparent;
  --neeto-ui-btn-hover-box-shadow: none;
  --neeto-ui-btn-hover-opacity: 1;

  // Focus
  --neeto-ui-btn-focus-color: rgb(var(--neeto-ui-black));
  --neeto-ui-btn-focus-box-shadow: none;
  --neeto-ui-btn-focus-opacity: 1;

  // Focus Visible
  --neeto-ui-btn-focus-visible-color: rgb(var(--neeto-ui-black));
  --neeto-ui-btn-focus-visible-outline: 3px solid rgba(var(--neeto-ui-primary-500), 50%);
  --neeto-ui-btn-focus-visible-outline-offset: 1px;
  --neeto-ui-btn-focus-visible-box-shadow: none;
}

.neeto-ui-btn {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  padding: var(--neeto-ui-btn-padding-y) var(--neeto-ui-btn-padding-x);
  gap: var(--neeto-ui-btn-gap);

  color: var(--neeto-ui-btn-color);
  background-color: var(--neeto-ui-btn-bg-color);
  font-size: var(--neeto-ui-btn-font-size);
  font-weight: var(--neeto-ui-btn-font-weight);
  line-height: var(--neeto-ui-btn-line-height);
  transition: var(--neeto-ui-transition);
  border-width: var(--neeto-ui-btn-border-width);
  border-style: solid;
  border-color: var(--neeto-ui-btn-border-color);
  border-radius: var(--neeto-ui-btn-border-radius);
  box-shadow: var(--neeto-ui-btn-box-shadow);
  outline: var(--neeto-ui-btn-outline);

  user-select: none;
  min-width: 0;
  cursor: pointer;

  &.neeto-ui-btn--icon-only {
    --neeto-ui-btn-padding-x: 0.375rem;
    --neeto-ui-btn-padding-y: 0.375rem;

    .neeto-ui-btn__icon,
    .neeto-ui-btn__spinner svg {
      pointer-events: none;
      width: var(--neeto-ui-btn-icon-size) !important;
      height: var(--neeto-ui-btn-icon-size) !important;
    }
  }

  // size - medium - 32px
  &--size-medium {
    --neeto-ui-btn-padding-x: 1rem;
    --neeto-ui-btn-padding-y: 0.5rem;
    --neeto-ui-btn-gap: 0.5rem;
    --neeto-ui-btn-icon-size: 1.25rem;
  }

  // size - large - 40px
  &--size-large {
    --neeto-ui-btn-font-size: var(--neeto-ui-text-base);
    --neeto-ui-btn-padding-x: 1.25rem;
    --neeto-ui-btn-padding-y: 0.75rem;
    --neeto-ui-btn-gap: 0.625rem;
    --neeto-ui-btn-icon-size: 1.5rem;

    &.neeto-ui-btn--icon-only {
      --neeto-ui-btn-padding-x: 0.5rem;
      --neeto-ui-btn-padding-y: 0.5rem;
    }
  }

  &:focus,
  &:focus-visible {
    outline: none;
  }

  &:hover {
    text-decoration: none;
  }

  &:hover:not(:disabled),
  &:active {
    color: var(--neeto-ui-btn-hover-color);
    background-color: var(--neeto-ui-btn-hover-bg-color);
  }

  &:focus {
    color: var(--neeto-ui-btn-focus-color);
    box-shadow: var(--neeto-ui-btn-focus-box-shadow);
  }

  &:focus-visible {
    color: var(--neeto-ui-btn-focus-visible-color);

    outline: var(--neeto-ui-btn-focus-visible-outline);
    outline-offset: var(--neeto-ui-btn-focus-visible-outline-offset);
    box-shadow: var(--neeto-ui-btn-focus-visible-box-shadow);
  }

  &.disabled {
    cursor: not-allowed;
    opacity: var(--neeto-ui-btn-disabled-opacity);
  }

  .neeto-ui-btn__spinner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    .neeto-ui-spinner{
      border-color: currentColor !important;
    }
  }
}

.neeto-ui-btn--icon-left {
  flex-direction: row-reverse;
}

.neeto-ui-btn__icon,
.neeto-ui-btn__spinner,
.neeto-ui-btn__spinner-wrapper {
  pointer-events: none;
  color: inherit;
  svg {
    color: inherit !important;
  }
}

// width
.neeto-ui-btn--width-full {
  width: 100% !important;
  justify-content: center;
}

// styles
.neeto-ui-btn--style {
  &-primary {
    --neeto-ui-btn-color: rgb(var(--neeto-ui-white));
    --neeto-ui-btn-bg-color: rgb(var(--neeto-ui-primary-500));
    --neeto-ui-btn-hover-color: rgb(var(--neeto-ui-white));
    --neeto-ui-btn-hover-bg-color: rgb(var(--neeto-ui-primary-600));
    --neeto-ui-btn-focus-color: rgb(var(--neeto-ui-white));
    --neeto-ui-btn-focus-box-shadow: 0 0 0 3px rgba(var(--neeto-ui-primary-500), 15%);
    --neeto-ui-btn-focus-visible-color: rgb(var(--neeto-ui-white));
  }

  &-secondary {
    --neeto-ui-btn-color: rgb(var(--neeto-ui-black));
    --neeto-ui-btn-bg-color: rgb(var(--neeto-ui-gray-200));
    --neeto-ui-btn-hover-color: rgb(var(--neeto-ui-black));
    --neeto-ui-btn-hover-bg-color: rgb(var(--neeto-ui-gray-300));
    --neeto-ui-btn-focus-color: rgb(var(--neeto-ui-black));
    --neeto-ui-btn-focus-box-shadow: 0 0 0 3px rgba(var(--neeto-ui-gray-800), 25%);
    --neeto-ui-btn-focus-visible-color: rgb(var(--neeto-ui-black));
  }

  &-tertiary {
    --neeto-ui-btn-color: rgb(var(--neeto-ui-black));
    --neeto-ui-btn-bg-color: rgb(var(--neeto-ui-white));
    --neeto-ui-btn-hover-color: rgb(var(--neeto-ui-black));
    --neeto-ui-btn-hover-bg-color: rgb(var(--neeto-ui-gray-100));
    --neeto-ui-btn-focus-color: rgb(var(--neeto-ui-black));
    --neeto-ui-btn-box-shadow: inset 0 0 0 1px rgba(var(--neeto-ui-gray-400));
    --neeto-ui-btn-focus-box-shadow: inset 0 0 0 1px rgba(var(--neeto-ui-gray-400)), 0 0 0 1px rgba(var(--neeto-ui-gray-400));
    --neeto-ui-btn-focus-visible-box-shadow: inset 0 0 0 1px rgba(var(--neeto-ui-gray-400)), 0 0 0 1px rgba(var(--neeto-ui-gray-400));
    --neeto-ui-btn-focus-visible-color: rgb(var(--neeto-ui-black));
  }

  &-text {
    --neeto-ui-btn-color: rgb(var(--neeto-ui-gray-800));
    --neeto-ui-btn-hover-color: rgb(var(--neeto-ui-gray-800));
    --neeto-ui-btn-hover-bg-color: rgb(var(--neeto-ui-gray-200));
    --neeto-ui-btn-focus-color: rgb(var(--neeto-ui-gray-800));
    --neeto-ui-btn-focus-box-shadow: 0 0 0 3px rgba(var(--neeto-ui-gray-800), 15%);
    --neeto-ui-btn-focus-visible-color: rgb(var(--neeto-ui-gray-800));
  }

  &-link {
    --neeto-ui-btn-padding-x: 0px;
    --neeto-ui-btn-padding-y: 0px;
    --neeto-ui-btn-color: rgb(var(--neeto-ui-accent-800));
    --neeto-ui-btn-hover-color: rgb(var(--neeto-ui-accent-800));
    --neeto-ui-btn-hover-opacity: 0.8;
    --neeto-ui-btn-focus-color: rgb(var(--neeto-ui-accent-800));
    --neeto-ui-btn-focus-opacity: 0.8;
    --neeto-ui-btn-focus-visible-color: rgb(var(--neeto-ui-accent-800));
    --neeto-ui-btn-focus-visible-outline: 3px solid rgba(var(--neeto-ui-accent-500), 50%);
  }

  &-danger {
    --neeto-ui-btn-color: rgb(var(--neeto-ui-white));
    --neeto-ui-btn-bg-color: rgb(var(--neeto-ui-error-500));
    --neeto-ui-btn-hover-color: rgb(var(--neeto-ui-white));
    --neeto-ui-btn-hover-bg-color: rgb(var(--neeto-ui-error-600));
    --neeto-ui-btn-focus-color: rgb(var(--neeto-ui-white));
    --neeto-ui-btn-focus-box-shadow: 0 0 0 3px rgba(var(--neeto-ui-error-500), 15%);
    --neeto-ui-btn-focus-visible-color: rgb(var(--neeto-ui-white));
    --neeto-ui-btn-focus-visible-outline: 3px solid rgba(var(--neeto-ui-error-500), 50%);
  }

  &-danger-text {
    --neeto-ui-btn-color: rgb(var(--neeto-ui-error-800));
    --neeto-ui-btn-hover-color: rgb(var(--neeto-ui-error-800));
    --neeto-ui-btn-hover-bg-color: rgb(var(--neeto-ui-error-100));
    --neeto-ui-btn-focus-color: rgb(var(--neeto-ui-error-800));
    --neeto-ui-btn-focus-box-shadow: 0 0 0 3px rgba(var(--neeto-ui-error-500), 15%);
    --neeto-ui-btn-focus-visible-color: rgb(var(--neeto-ui-error-800));
    --neeto-ui-btn-focus-visible-outline: 3px solid rgba(var(--neeto-ui-error-500), 50%);
  }
}

.neetix-button--primary {
  --neeto-ui-btn-color: rgb(var(--neeto-ui-white));
  --neeto-ui-btn-bg-color: rgb(var(--neeto-ui-gray-800));
  --neeto-ui-btn-hover-color: rgb(var(--neeto-ui-white));
  --neeto-ui-btn-hover-bg-color: rgb(var(--neeto-ui-black));
  --neeto-ui-btn-focus-color: rgb(var(--neeto-ui-white));
  --neeto-ui-btn-focus-box-shadow: 0 0 0 3px rgba(var(--neeto-ui-gray-500), 15%);
  --neeto-ui-btn-focus-visible-color: rgb(var(--neeto-ui-white));
}

.neeto-ui-btn--loading{
  & > *{
    opacity: 0;
    visibility: hidden;
  }
  .neeto-ui-btn__spinner{
    opacity: 1;
    visibility: visible;
  }
}
