.nest-btn {
  --btn-bd-color: var(--nest-btn-bd-color, #009e42);
  --btn-bg-color: var(--nest-btn-bg-color, #009e42);
  --btn-color: var(--nest-btn-color, #ffffff);

  display: inline-block;
  vertical-align: middle;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition-property: background-color, bd-color, color, opacity;
  transition: 0.3s ease;

  font-weight: var(--nest-btn-fw, 800);
  font-size: var(--btn-fs, var(--nest-btn-fs, 14px));
  line-height: var(--btn-lh, var(--nest-btn-lh, 18px));
  border-radius: var(--btn-rad, var(--nest-btn-rad, 8px));

  border: 1px solid var(--btn-bd-color);
  background-color: var(--btn-bg-color);
  color: var(--btn-color);
}

/* use default variant tokens when no variant */
.nest-btn:not([data-n-variant]) {
  --btn-bd-color-hover: var(--nest-btn-bd-color-hover);
  --btn-bg-color-hover: var(--nest-btn-bg-color-hover);
  --btn-color-hover: var(--nest-btn-color-hover);
  --btn-bd-color-active: var(--nest-btn-bd-color-active);
  --btn-bg-color-active: var(--nest-btn-bg-color-active);
  --btn-color-active: var(--nest-btn-color-active);
  --btn-bd-color-disabled: var(--nest-btn-bd-color-disabled);
  --btn-bg-color-disabled: var(--nest-btn-bg-color-disabled);
  --btn-color-disabled: var(--nest-btn-color-disabled);
  --btn-loader-color: var(--nest-btn-loader-color);
}

@media (hover: hover) and (pointer: fine) {
  .nest-btn:not([data-n-disabled]):hover {
    border-color: var(--btn-bd-color-hover, var(--btn-bd-color));
    background-color: var(--btn-bg-color-hover, var(--btn-bg-color));
    color: var(--btn-color-hover, var(--btn-color));
  }
}

.nest-btn:not([data-n-disabled]):active {
  transition: background-color 0s ease, bd-color 0s ease, color 0s ease;
  border-color: var(--btn-bd-color-active, var(--btn-bd-color));
  background-color: var(--btn-bg-color-active, var(--btn-bg-color));
  color: var(--btn-color-active, var(--btn-color));
}

.nest-btn[data-n-disabled] {
  cursor: not-allowed;
  border-color: var(--btn-bd-color-disabled, var(--btn-bd-color));
  background-color: var(--btn-bg-color-disabled, var(--btn-bg-color));
  color: var(--btn-color-disabled, var(--btn-color));
  opacity: var(--nest-btn-opacity-disabled, 0.32);
}

.nest-btn[data-n-block] {
  display: block;
  width: 100%;
}

.nest-btn-inner {
  display: block;
  margin: -1px;
  position: relative;
  flex-grow: 1;
  padding-inline: var(--btn-px, var(--nest-btn-px, 8px));
  height: var(--btn-h, var(--nest-btn-h, 40px));
}

.nest-btn-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50% 0;
  color: var(--btn-loader-color, --btn-color);
  width: var(--btn-icon-size, var(--nest-btn-icon-size, 24px));
  height: var(--btn-icon-size, var(--nest-btn-icon-size, 24px));
}

.nest-btn-main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  transition: opacity 0.3s cubic-bezier(0.63, 0.01, 0.29, 1), translate 0.3s cubic-bezier(0.63, 0.01, 0.29, 1);
  white-space: nowrap;
  gap: var(--btn-gap, var(--nest-btn-gap, 4px));
}

.nest-btn[data-n-loading] .nest-btn-main {
  opacity: 0;
  translate: 0 -50%;
}

.nest-btn-icon {
  flex-shrink: 0;
  width: var(--btn-icon-size, var(--nest-btn-icon-size, 24px));
  height: var(--btn-icon-size, var(--nest-btn-icon-size, 24px));
}