@import "tailwindcss/theme";
@import "../variables/theme.css";

.button {
  --icon-color: var(--color-blue-100);

  @apply inline-flex cursor-pointer items-center justify-center;

  gap: var(--spacing-8);
  width: fit-content;
  min-width: 160px;
  height: 48px;
  padding: var(--spacing-8) var(--spacing-16);
  background: linear-gradient(
      254deg,
      var(--color-blue-400) 8.18%,
      var(--color-blue-600) 90.55%
    )
    0 0 no-repeat;
  background-size: 100% 100%;
  transition:
    all 0.3s ease-in-out,
    width 0s;

  @variant pointer-fine {
    &:hover {
      background-size: 250% 100%;
    }
  }

  &:hover:active,
  &:active {
    background: var(--color-blue-700);
    transition: none;
  }

  &:focus-visible {
    outline: 2px solid var(--color-blue-300);
    outline-offset: 2px;
    transition: none;
  }

  &:disabled,
  &[disabled],
  &[disabled]:hover,
  &[disabled]:active {
    --color-button-text: var(--color-neutral-300);
    --icon-color: var(--color-neutral-300);

    @apply pointer-events-none cursor-default;

    user-select: none;
    background: var(--color-neutral-100);
    opacity: 0.4;
    transition: none;
  }
}

.button--second {
  --color-button-text: var(--color-blue-500);
  --icon-color: var(--color-blue-500);

  background: var(--color-neutral-100);
  box-shadow: inset 0 0 0 1px var(--color-blue-500);

  @variant pointer-fine {
    &:hover {
      background: var(--color-blue-100);
    }
  }

  &:hover:active,
  &:active {
    --color-button-text: var(--color-blue-100);
    --icon-color: var(--color-blue-100);

    background: var(--color-blue-700);
    box-shadow: none;
  }

  &:disabled,
  &[disabled],
  &[disabled]:hover,
  &[disabled]:active {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--color-neutral-300);
  }
}

.button--ghost {
  --color-button-text: var(--color-blue-500);
  --icon-color: var(--color-blue-500);

  outline: 1px solid --alpha(var(--color-blue-500) / 0);
  outline-offset: 1.5px;
  background: var(--color-neutral-100);

  /* box-shadow: inset 0 0 0 1px var(--color-neutral-100); */

  @variant pointer-fine {
    &:hover {
      outline: 1px solid --alpha(var(--color-blue-500) / 100%);
      outline-offset: 0;
      background: var(--color-blue-100);
    }
  }

  &:hover:active,
  &:active {
    --color-button-text: var(--color-blue-100);
    --icon-color: var(--color-blue-100);

    background: var(--color-blue-700);
  }

  &:focus-visible {
    outline: 2px solid var(--color-blue-300);
    outline-offset: 2px;
  }

  &:active,
  &:disabled,
  &[disabled],
  &[disabled]:hover,
  &[disabled]:active {
    outline: none;
    box-shadow: none;
  }
}

.button--text {
  --color-button-text: var(--color-blue-500);
  --icon-color: var(--color-button-text);

  @apply justify-start;

  min-width: auto;
  height: fit-content;
  min-height: 24px;
  padding: 0;
  background: transparent;
  transition: none;

  @variant pointer-fine {
    &:hover {
      --color-button-text: var(--color-blue-600);

      text-decoration: solid underline var(--color-button-text);
    }
  }

  &:hover:active,
  &:active {
    --color-button-text: var(--color-blue-700);

    text-decoration: solid underline var(--color-button-text);
    background: transparent;
  }

  &:focus-visible {
    --color-button-text: var(--color-blue-600);

    outline: none;
  }

  &:disabled,
  &[disabled],
  &[disabled]:hover,
  &[disabled]:active {
    --color-button-text: var(--color-neutral-300);
  }
}

.button--icon {
  --icon-color: var(--color-blue-500);

  width: fit-content;
  min-width: auto;
  height: fit-content;
  padding: 12px;
  background: transparent;
  transition: none;

  @variant pointer-fine {
    &:hover {
      box-shadow: 0 0 0 1px var(--icon-color);
    }
  }

  &:hover:active,
  &:active {
    background: transparent;
    box-shadow: 0 0 0 1px var(--icon-color);
  }

  &:focus-visible {
    outline: none;
    background: transparent;
    box-shadow: 0 0 0 1px var(--icon-color);
  }

  &:disabled,
  &[disabled],
  &[disabled]:hover,
  &[disabled]:active {
    --icon-color: var(--color-neutral-300);

    background: transparent;
    box-shadow: none;
    opacity: 1;
  }
}

.button-text {
  @apply block;

  font: var(--t4-medium);
  color: var(--color-button-text, var(--color-blue-100));
}