.btn {
  display: inline-block;
  width: 100%;
  border: none;
  border-radius: var(--btn-border-radius, 7px);
  outline: none;
  font-size: var(--btn-font-size, var(--font-size-base));
  line-height: var(--btn-line-height, var(--line-height-base));
  font-weight: var(--btn-font-weight, var(--font-weight-medium));
  text-align: center;
  text-decoration: none;
  transition: background-color 120ms ease-out;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--color-gray-950);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--btn-primary-background, var(--color-gray-900));
  color: var(--btn-primary-color, var(--color-white));
}

.btn--primary:hover {
  background: var(--btn-primary-hover-background, var(--color-gray-800));
}

.btn--secondary {
  background: var(--btn-secondary-background, var(--color-white));
  color: var(--btn-secondary-color, var(--color-gray-700));
  border: 1px solid var(--btn-secondary-border-color, var(--color-gray-300));
}

.btn--secondary:hover {
  background: var(--btn-secondary-hover-background, var(--color-gray-50));
  border-color: var(--btn-secondary-hover-border-color, var(--color-gray-400));
}

.btn--md {
  padding: var(--btn-md-padding, 9px 16px);
}

.btn--fit-width {
  width: auto;
}

.button {
  --button-icon-color: currentColor;
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.125rem;
  inline-size: 100%;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 550;
  border-radius: 0.5rem;
}

.button.variant-primary {
  background: var(--color-gray-900);
  color: var(--color-white);
}

.button.variant-primary.tone-critical {
  background: crimson;
}

.button.variant-secondary {
  background: var(--color-white);
  color: var(--color-gray-950);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-300);
}

.button.variant-secondary.tone-critical {
  color: crimson;
}

.button.variant-tertiary {
  background: var(--color-white);
  color: var(--color-gray-900);
}

.button.variant-tertiary.tone-critical {
  color: crimson;
}

.button.size-base {
  padding: 0.75rem;
}

.button.size-base.icon-only {
  inline-size: 2.75rem;
}

.button.size-base.icon-only .text-wrapper {
  display: none;
}

.button .content,
.button .text-wrapper {
  display: inline-flex;
}

.button .content {
  align-items: inherit;
  gap: inherit;
}

.button .icon {
  display: block;
  color: var(--button-icon-color, var(--color-gray-900));
  block-size: 1.25rem;
  inline-size: 1.25rem;
  line-height: 1;
}

.button svg {
  fill: currentColor;
}

.button.disabled {
  user-select: none;
  cursor: initial;
  box-shadow: none;
}

.button.disabled.variant-primary {
  background: var(--color-gray-300);
  color: var(--color-white);
}

.button.disabled.variant-secondary {
  background: var(--color-gray-100);
  color: var(--color-gray-400);
}

.button.disabled.variant-tertiary {
  background: var(--color-white);
  color: var(--color-gray-400);
}

.button.disabled.loading {
  color: transparent;
}

.button .spinner {
  position: absolute;
  color: var(--color-gray-500);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button .spinner .spinner {
  display: block;
  block-size: 1.25rem;
  inline-size: 1.25rem;
}

.button .spinner svg {
  fill: none;
  margin: initial;
  transform-origin: center;
  animation: rotate 500ms linear infinite;
}

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

.spinner .bg-path {
  stroke: rgba(0, 0, 0, 0.17);
}

.spinner .fg-path {
  stroke: #303030;
  stroke-linecap: round;
  stroke-dasharray: 4 6;
}

@media (min-width: 48rem), (pointer: fine) {
  .button {
    inline-size: fit-content;
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .button.size-base {
    padding: 0.375rem 0.75rem;
  }

  .button.size-base.icon-with-text {
    padding-block: 0.25rem;
    padding-inline-start: 0.5rem;
  }

  .button.size-base.icon-only {
    inline-size: 1.75rem;
    padding: 0.25rem;
  }

  .button svg {
    margin: 0.125rem;
  }

  .button.variant-primary:hover:not(:disabled) {
    background: var(--color-gray-800);
    color: var(--color-gray-50);
  }

  .button.variant-primary.tone-critical:hover:not(:disabled) {
    background: red;
  }

  .button.variant-primary:focus-visible:not(:disabled) {
    outline: 0.125rem solid var(--color-gray-950);
    outline-offset: 0.0625rem;
  }

  .button.variant-secondary:hover:not(:disabled) {
    background: var(--color-gray-100);
    color: var(--color-gray-800);
  }

  .button.variant-secondary.tone-critical:hover:not(:disabled) {
    color: crimson;
  }

  .button.variant-secondary:focus-visible:not(:disabled) {
    outline: 0.125rem solid var(--color-gray-950);
    outline-offset: 0.0625rem;
  }

  .button.variant-tertiary:hover:not(:disabled) {
    background: var(--color-gray-100);
    color: var(--color-gray-800);
  }

  .button.variant-tertiary.tone-critical:hover:not(:disabled) {
    background: var(--color-gray-100);
    color: crimson;
  }

  .button.variant-tertiary:focus-visible:not(:disabled) {
    outline: 0.125rem solid var(--color-gray-950);
    outline-offset: 0.0625rem;
    background: var(--color-gray-100);
  }
}