@import "tailwindcss";

@utility container {
    margin-inline: auto;
    padding: 2rem 4rem;
    max-width: 42rem;
}

@utility button {
    display: flex;
    align-items: center;
    gap: theme(gap.2);
    cursor: pointer;
    border-width: 1px;
    padding: theme(spacing.1) theme(spacing.2);

    @variant hover {
        background-color: theme(colors.gray.50)
    }

    @variant disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }
}

@utility input {
  padding: theme(spacing.1) theme(spacing.2);
  border-width: 1px;
  font-size: theme(text.sm);

  @variant placeholder {
    opacity: 0.75;
  }
}